/* ═══════════════════════════════════════════════════════
   CHATBOT — Inline Expanding Widget
   Matches Figma spec: node 97:3361
   ═══════════════════════════════════════════════════════ */

/* ─── Trigger Button (pill) ──────────────────────────── */
.chat-trigger {
  position: fixed;
  /* position context for ::before gradient flash */
  bottom: 28px;
  right: 28px;
  z-index: 9998;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              background 0.3s ease,
              opacity 0.2s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.chat-trigger > * { position: relative; z-index: 2; }

/* Gradient flash overlay — colors from favicon gradient */
.chat-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(223, 58, 88, 0.15) 15%,
    rgba(244, 136, 74, 0.15) 35%,
    rgba(252, 195, 92, 0.15) 55%,
    rgba(74, 141, 168, 0.12) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.chat-trigger:hover::before {
  opacity: 1;
  animation: gradientFlash 0.8s ease-out forwards;
}

@keyframes gradientFlash {
  from { background-position: -100% 0; }
  to   { background-position: 100% 0; }
}

.chat-trigger:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.chat-trigger:active { transform: scale(0.97); }

/* Hide trigger when chat is open */
.chat-trigger.active {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}

.chat-trigger-icon {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex-shrink: 0;
  overflow: hidden;
}

/* ─── Chat Window ────────────────────────────────────── */
.chat-window {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9997;
  width: 360px;
  min-height: 400px;
  max-height: 540px;
  border-radius: 14px;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.16),
              0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.9);

  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-window.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ─── Header ─────────────────────────────────────────── */
.chat-header {
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.chat-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-header-icon {
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  flex-shrink: 0;
  overflow: hidden;
}
.chat-header h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  margin: 0;
}

/* Minimize button — 36x36, ghost style, rounded-md */
.chat-minimize-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.chat-minimize-btn svg { width: 16px; height: 16px; }
.chat-minimize-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ─── Content Area ───────────────────────────────────── */
.chat-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Jump-to-latest button, shown once the visitor scrolls up */
.chat-scroll-bottom {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.2s ease,
              transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.15s ease;
}
.chat-scroll-bottom.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.chat-scroll-bottom:hover { background: #ffffff; }
.chat-scroll-bottom:active { transform: translateX(-50%) scale(0.95); }
.chat-scroll-bottom svg { width: 16px; height: 16px; }

/* ─── Messages Area ──────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.08) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

/* ─── Message Styles ─────────────────────────────────── */
.chat-msg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  animation: chatMsgIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bot messages — plain text, no bubble */
.chat-msg.bot {
  color: rgba(0, 0, 0, 0.9);
}

/* User messages — subtle bubble, right-aligned */
.chat-msg.user {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.9);
  border-bottom-right-radius: 4px;
}

.chat-msg a {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
.chat-msg a:hover { text-decoration-color: rgba(0, 0, 0, 0.7); }

/* ─── Suggestion Buttons ─────────────────────────────── */
.chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: chatMsgIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chat-suggest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #0a0a0a;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-suggest-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: #d4d4d4;
}

/* ─── Typing Indicator ───────────────────────────────── */
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  align-self: flex-start;
}
.chat-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  animation: typingDot 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ─── Input Area ─────────────────────────────────────── */
.chat-input-area {
  padding: 16px;
  flex-shrink: 0;
}

/* Context panel (project pages only): wraps the label row and the composer.
   Rounded at the top, square at the bottom, and it runs all the way down to
   the composer's bottom edge. The composer keeps its own rounded corners. */
.chat-input-area.has-context .chat-composer {
  border: 1px solid #e5e5e5;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: rgba(0, 0, 0, 0.035);
}
.chat-context-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  cursor: default;
  user-select: none;
}
.chat-context-icon {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.5);
}
.chat-context-icon svg { width: 14px; height: 14px; }
.chat-context-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-context-meta {
  color: rgba(0, 0, 0, 0.4);
  font-weight: 400;
  white-space: nowrap;
}
.chat-context-meta::before { content: '·'; margin-right: 6px; }
.chat-context-chip[hidden] { display: none; }

/* Composer sits inside the panel with an opaque surface */
.chat-input-area.has-context .chat-input-wrap {
  position: relative;
  z-index: 1;
  margin: 0 -1px -1px;   /* sit flush with the panel's outer edges */
  background: rgba(255, 255, 255, 0.96);
}

.chat-input-wrap {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.96);
}

.chat-input-wrap {
  border-radius: 0 0 8px 8px;
}
.chat-input-wrap {
  display: flex;
  align-items: flex-end;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  padding: 8px;
  gap: 0;
  transition: border-color 0.15s ease;
}
.chat-input-wrap:focus-within {
  border-color: rgba(0, 0, 0, 0.25);
}

.chat-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding: 8px 8px;
  margin: 0;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  outline: none;
  resize: none;
  overflow-y: hidden;
  height: 36px;          /* one line, matches the send button */
  max-height: 120px;
  scrollbar-width: thin;
}
.chat-input::placeholder { color: rgba(0, 0, 0, 0.3); }

.chat-send {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: #171717;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.chat-send:hover { background: #0a0a0a; }
.chat-send:active { transform: scale(0.95); }
.chat-send svg { width: 16px; height: 16px; }

/* ─── Light Mode — Inverted (dark chatbot) ──────────── */
[data-theme="light"] .chat-trigger {
  background: rgba(23, 23, 23, 0.92);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .chat-trigger::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(223, 58, 88, 0.25) 15%,
    rgba(244, 136, 74, 0.25) 35%,
    rgba(252, 195, 92, 0.25) 55%,
    rgba(74, 141, 168, 0.2) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
}
[data-theme="light"] .chat-trigger:hover {
  background: rgba(23, 23, 23, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .chat-window {
  background: rgba(23, 23, 23, 0.88);
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .chat-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .chat-header h3 {
  color: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .chat-header-icon {
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .chat-minimize-btn {
  color: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .chat-minimize-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .chat-msg {
  color: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .chat-msg.bot {
  color: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .chat-msg.user {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .chat-msg a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration-color: rgba(255, 255, 255, 0.3);
}
[data-theme="light"] .chat-msg a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .chat-suggest-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .chat-suggest-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

[data-theme="light"] .chat-typing span {
  background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .chat-scroll-bottom {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(38, 38, 38, 0.95);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .chat-scroll-bottom:hover {
  background: rgba(50, 50, 50, 0.98);
}

[data-theme="light"] .chat-input-area.has-context .chat-composer {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .chat-context-chip {
  color: rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .chat-input-area.has-context .chat-input-wrap {
  background: rgba(38, 38, 38, 0.98);
}
[data-theme="light"] .chat-context-icon { color: rgba(255, 255, 255, 0.55); }
[data-theme="light"] .chat-context-meta { color: rgba(255, 255, 255, 0.45); }

[data-theme="light"] .chat-input-wrap {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .chat-input-wrap:focus-within {
  border-color: rgba(255, 255, 255, 0.35);
}
[data-theme="light"] .chat-input {
  color: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .chat-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

[data-theme="light"] .chat-send {
  background: #fafafa;
  color: #171717;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .chat-send:hover {
  background: #ffffff;
}

[data-theme="light"] .chat-messages {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* ─── Mobile ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .chat-window {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: 75vh;
  }
  .chat-trigger {
    bottom: 20px;
    right: 20px;
  }
}

/* ─── Talk button (voice panel entry point) ─────────── */
.chat-header-right { display: flex; align-items: center; gap: 2px; }
.chat-talk-btn {
  height: 32px;
  padding: 0 10px 0 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s ease;
}
.chat-talk-btn svg { width: 15px; height: 15px; }
.chat-talk-btn:hover { background: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .chat-talk-btn { color: rgba(255, 255, 255, 0.95); }
[data-theme="light"] .chat-talk-btn:hover { background: rgba(255, 255, 255, 0.1); }