/*
 * Landing chat widget — Kodak/vintage skin to match the marketing
 * site. Floating launcher bottom-right, expands into a 360×520 panel.
 * No third-party CSS; relies on the Font Awesome already loaded by the
 * landing page.
 */
:root {
  --snaps-chat-yellow: #FFB000;
  --snaps-chat-yellow-dk: #F59E00;
  --snaps-chat-brown: #8B4513;
  --snaps-chat-cream: #FFFDD0;
  --snaps-chat-ink: #1A1A1A;
  --snaps-chat-bot: #FFFFFF;
  --snaps-chat-user: #1A1A1A;
  --snaps-chat-user-ink: #FFFDD0;
  --snaps-chat-mono: 'Courier New', Courier, monospace;
}

.snaps-chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 18px;
  border: 2px solid var(--snaps-chat-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--snaps-chat-yellow), var(--snaps-chat-yellow-dk));
  color: var(--snaps-chat-ink);
  font-family: var(--snaps-chat-mono);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 6px 0 var(--snaps-chat-ink), 0 14px 28px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.snaps-chat-launcher:hover { transform: translateY(-1px); }
.snaps-chat-launcher:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--snaps-chat-ink), 0 6px 12px rgba(0,0,0,0.18); }
.snaps-chat-launcher i { font-size: 16px; }
.snaps-chat-launcher.is-hidden { display: none; }

.snaps-chat-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 32px);
  background: var(--snaps-chat-cream);
  border: 2px solid var(--snaps-chat-ink);
  border-radius: 16px;
  box-shadow: 0 8px 0 var(--snaps-chat-ink), 0 24px 48px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--snaps-chat-ink);
}
.snaps-chat-panel.is-hidden { display: none; }

.snaps-chat-header {
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--snaps-chat-yellow), var(--snaps-chat-yellow-dk));
  border-bottom: 2px solid var(--snaps-chat-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.snaps-chat-header-text { flex: 1; line-height: 1.2; }
.snaps-chat-header-title {
  font-family: var(--snaps-chat-mono);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.snaps-chat-header-sub {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
}
.snaps-chat-iconbtn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1.5px solid var(--snaps-chat-ink);
  background: transparent;
  color: var(--snaps-chat-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.snaps-chat-iconbtn:hover { background: rgba(0,0,0,0.08); }

.snaps-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(139,69,19,0.04) 28px 29px);
}

.snaps-chat-msg {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  border: 1.5px solid var(--snaps-chat-ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.snaps-chat-msg.assistant {
  align-self: flex-start;
  background: var(--snaps-chat-bot);
}
.snaps-chat-msg.user {
  align-self: flex-end;
  background: var(--snaps-chat-user);
  color: var(--snaps-chat-user-ink);
}
.snaps-chat-msg strong { font-weight: 700; }
.snaps-chat-msg a { color: inherit; text-decoration: underline; }
.snaps-chat-msg ul, .snaps-chat-msg ol { margin: 6px 0 6px 18px; padding: 0; }

/* Typing indicator — three dots that pulse while we wait for the
   first token. The dots live as real DOM inside the bubble so they're
   the only thing visible until we start writing actual text. */
.snaps-chat-typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 2px;
}
.snaps-chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--snaps-chat-ink);
  opacity: 0.45;
  animation: snaps-chat-typing 1.2s infinite ease-in-out;
}
.snaps-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.snaps-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes snaps-chat-typing {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.45; }
  40%           { transform: scale(1);   opacity: 1; }
}

.snaps-chat-support {
  align-self: flex-start;
  margin-top: -4px;
}
.snaps-chat-support a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--snaps-chat-ink);
  border-radius: 999px;
  background: var(--snaps-chat-cream);
  font-family: var(--snaps-chat-mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--snaps-chat-ink);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--snaps-chat-ink);
}
.snaps-chat-support a:hover { background: var(--snaps-chat-yellow); }

.snaps-chat-composer {
  border-top: 2px solid var(--snaps-chat-ink);
  padding: 10px 12px;
  background: var(--snaps-chat-cream);
  display: flex;
  align-items: center;
  gap: 8px;
}
.snaps-chat-composer textarea {
  flex: 1;
  resize: none;
  min-height: 36px;
  max-height: 110px;
  padding: 8px 10px;
  border: 1.5px solid var(--snaps-chat-ink);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--snaps-chat-ink);
  outline: none;
}
.snaps-chat-composer textarea:focus { box-shadow: 0 0 0 2px var(--snaps-chat-yellow); }
.snaps-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--snaps-chat-ink);
  background: linear-gradient(180deg, var(--snaps-chat-yellow), var(--snaps-chat-yellow-dk));
  color: var(--snaps-chat-ink);
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 3px 0 var(--snaps-chat-ink);
}
.snaps-chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.snaps-chat-send:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--snaps-chat-ink); }
.snaps-chat-send:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 480px) {
  .snaps-chat-launcher { right: 14px; bottom: 14px; padding: 12px 18px 12px 14px; font-size: 12px; }
  .snaps-chat-panel    { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 12px; }
}