/* Chat widget — Kraken FAQ assistant (UI scaffolding) */

.chat {
  --chat-bg: var(--color-surface);
  --chat-fg: var(--color-text);
  --chat-border: var(--color-border);
  --chat-accent: var(--color-action);
  position: fixed;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
  right: clamp(1rem, 2vw, 1.5rem);
  z-index: var(--z-chat);
  font-family: var(--font-sans);
}

/* Launcher */
.chat__launcher {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--chat-border);
  background:
    radial-gradient(circle at 30% 30%, oklch(80% 0.12 195), oklch(60% 0.11 195) 60%, oklch(40% 0.10 195)),
    var(--chat-bg);
  color: oklch(15% 0 0);
  cursor: pointer;
  box-shadow: var(--shadow-2), 0 0 0 4px hsl(0 0% 0% / 0.4);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chat__launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-glow), var(--shadow-2); }
}
.chat__launcher:active { transform: scale(0.97); }
.chat__launcher svg { width: 26px; height: 26px; }
.chat__launcher .chat__close-icon { display: none; }
.chat[data-open="true"] .chat__launcher .chat__open-icon { display: none; }
.chat[data-open="true"] .chat__launcher .chat__close-icon { display: block; }

/* Panel */
.chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(60px + 1rem);
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 6rem));
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  display: none;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.chat[data-open="true"] .chat__panel {
  display: flex;
  animation: chat-up var(--dur-base) var(--ease-out);
}
@keyframes chat-up {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .chat[data-open="true"] .chat__panel { animation: none; }
}

@media (max-width: 520px) {
  .chat__panel {
    position: fixed;
    inset: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto; height: auto;
    border-radius: var(--radius-l);
  }
}

/* Header */
.chat__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m);
  border-bottom: 1px solid var(--chat-border);
  background: hsl(195 12% 10%);
}
.chat__head-title {
  flex: 1;
  display: grid;
}
.chat__head-title strong {
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  color: var(--chat-fg);
  letter-spacing: -0.01em;
}
.chat__head-title small {
  font-size: 0.7rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.chat__head-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--chat-border);
  color: var(--color-text-muted);
  width: 32px; height: 32px;
  border-radius: var(--radius-s);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.chat__head-close:hover { color: var(--chat-fg); border-color: var(--color-text-muted); }

/* Body / messages */
.chat__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.chat__msg {
  max-width: 85%;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  line-height: 1.5;
}
.chat__msg--bot {
  background: hsl(195 10% 14%);
  border: 1px solid var(--chat-border);
  color: var(--chat-fg);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat__msg--user {
  background: var(--chat-accent);
  color: oklch(15% 0 0);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-weight: var(--weight-semi);
}
.chat__msg--system {
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-align: center;
  align-self: center;
  font-style: italic;
}

/* Suggested chips */
.chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: 0 var(--space-m) var(--space-s);
}
.chat__chip {
  appearance: none;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--chat-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-s);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chat__chip:hover { color: var(--chat-fg); border-color: var(--color-text-muted); }
}

/* Footer / input */
.chat__foot {
  border-top: 1px solid var(--chat-border);
  padding: var(--space-s) var(--space-m);
  background: hsl(195 12% 10%);
}
.chat__form {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
}
.chat__form input {
  flex: 1;
  font: inherit;
  font-size: var(--step--1);
  padding: 0.625rem 0.875rem;
  background: var(--color-bg);
  color: var(--chat-fg);
  border: 1px solid var(--chat-border);
  border-radius: var(--radius-pill);
  min-height: 40px;
}
.chat__form input:focus-visible { outline: none; border-color: var(--chat-accent); }
.chat__form button {
  appearance: none;
  background: var(--chat-accent);
  color: oklch(15% 0 0);
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.chat__form button:hover { background: var(--color-action-hover); }
.chat__form button:active { transform: scale(0.94); }
.chat__form button svg { width: 16px; height: 16px; }

.chat__escape {
  margin-top: var(--space-2xs);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: center;
}
.chat__escape a { color: var(--color-text-muted); text-decoration: underline; text-decoration-color: hsl(195 10% 30%); }
.chat__escape a:hover { color: var(--chat-fg); }