/* The idea chat on the board (assistant.js). Layout, spacing, radii and motion follow the chat on
   the Systematics home page (AgentChat, AgentGreeting, AgentChatInput, AgentIntakeChips,
   AgentMessageBubble); colors, type and the brand radii come from the tokens in styles.css, so it
   follows light and dark. */

/* Hold the column until we know whether the chat is on, so the form doesn't flash in and out. */
.board-side.is-checking [data-idea-form] { display: none; }
.board-side.has-assistant > p { display: none; }
.board-side.is-chatting { position: static; }

.chat { display: grid; gap: 16px; font-size: 15px; color: var(--ink); }
.chat-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Empty state: greeting, the pill, the chip. */
.chat-empty { display: grid; gap: 16px; padding-top: 8px; }
.chat-hello { display: flex; align-items: flex-end; gap: 10px; }
.chat-avatar {
  position: relative; flex: none; width: 32px; height: 32px; margin-bottom: 2px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--btn-bg); color: var(--btn-ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}
.chat-avatar .ai-mark { width: 16px; height: 16px; margin: 0; color: currentColor; }
.chat-avatar::before {
  content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%);
  animation: chat-breathe 3s ease-in-out infinite;
}
.chat-bubble {
  position: relative; max-width: 80%; min-height: 40px; display: flex; align-items: center;
  padding: 10px 14px; border-radius: 20px 20px 20px 6px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04);
  animation: chat-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: bottom left;
}
.chat-hello-line { margin: 0; font-size: 15px; line-height: 1.35; letter-spacing: -0.01em; animation: chat-fade 0.2s ease both; }

.chat-dots { display: inline-flex; align-items: center; gap: 4px; padding: 3px 0; }
.chat-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); opacity: 0.5; animation: chat-bounce 1.2s infinite; }
.chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-dots i:nth-child(3) { animation-delay: 0.3s; }

/* The pill: textarea that grows to five rows, and a round send button. */
.chat-pill {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 6px 6px 18px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--rule); box-shadow: var(--shadow);
  transition: border-color 0.2s;
}
.chat-pill.is-tall { align-items: flex-end; border-radius: 24px; padding: 10px 8px 8px 18px; }
.chat-pill:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-pill textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent;
  padding: 6px 0; font: inherit; font-size: 15px; line-height: 24px; color: var(--ink); overflow-y: hidden;
}
.chat-pill textarea::placeholder { color: var(--ink-3); }
.chat-pill textarea:disabled { cursor: not-allowed; opacity: 0.6; }
.chat-send {
  flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: opacity 0.2s, background-color 0.2s;
}
.chat-send:hover:not(:disabled) { background: var(--btn-hover); }
.chat-send:disabled { opacity: 0.5; pointer-events: none; }
.chat-mic {
  flex: none; height: 36px; min-width: 36px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px; cursor: pointer; padding: 0 8px;
  background: transparent; color: var(--ink-3); transition: color 0.2s, background-color 0.2s;
}
.chat-mic:hover:not(:disabled) { color: var(--ink); background: var(--surface); }
.chat-mic:disabled { opacity: 0.5; pointer-events: none; }
.chat-mic.is-on { color: var(--accent); background: var(--surface); }
.chat-mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chat-mic.is-on svg { fill: currentColor; }
.chat-mic-time { font-size: 13px; font-variant-numeric: tabular-nums; }
.chat-mic-time:empty { display: none; }
.chat-send svg, .chat-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.chat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chat-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
  background: var(--bg); border: 1px solid var(--rule); box-shadow: var(--shadow);
  transition: background-color 0.2s;
}
.chat-chip:hover { background: var(--surface); }
.chat-chip svg { width: 16px; height: 16px; color: var(--accent); }
.chat-empty-error { text-align: center; }

/* The thread: the person's bubbles on the right, the assistant's text straight on the page. */
.chat-live { display: flex; flex-direction: column; gap: 4px; }
.chat-thread { display: flex; flex-direction: column; }
.msg { display: flex; width: 100%; padding: 6px 0; }
.msg-user { justify-content: flex-end; }
.msg-bubble {
  max-width: 82%; padding: 10px 12px; border-radius: 18px 18px 8px 18px;
  background: var(--btn-bg); color: var(--btn-ink);
  font-size: 15px; line-height: 1.625; white-space: pre-wrap; overflow-wrap: anywhere;
  animation: chat-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: bottom right;
}
.msg-a .msg-body {
  max-width: 100%; padding: 6px 4px; font-size: 15px; line-height: 1.625; color: var(--ink); overflow-wrap: anywhere;
  animation: chat-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: bottom left;
}
.msg-body > :first-child { margin-top: 0; }
.msg-body > :last-child { margin-bottom: 0; }
.msg-body p { margin: 0 0 8px; }
.msg-body ul, .msg-body ol { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.msg-body a { color: var(--accent); font-weight: 600; }
.msg-body code { font-size: 13px; padding: 1px 5px; border-radius: 6px; background: var(--surface); }
.msg-error { color: var(--ember); }
.chat-tail { height: 1px; scroll-margin-bottom: 128px; }

/* The dock stays at the bottom of the viewport while the thread scrolls under it. */
.chat-dock {
  position: sticky; bottom: 0; z-index: 5; display: grid; gap: 8px; padding: 12px 0 12px;
  background: linear-gradient(to top, var(--bg) 68%, rgb(var(--ground-rgb) / 0));
}
.chat-submit {
  justify-self: end; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
  background: var(--bg); border: 1.5px solid var(--ghost-edge);
  transition: border-color 0.2s;
}
.chat-submit:hover:not(:disabled) { border-color: var(--accent); }
.chat-submit:disabled { opacity: 0.6; cursor: default; }

/* Name and email, for visitors who aren't signed in. */
.chat-card, .chat-done {
  display: grid; gap: 14px; padding: 22px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--rule);
  animation: chat-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: bottom left;
}
.chat-card-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.chat-card .note { font-size: 13px; color: var(--ink-3); }
.chat-card .btn { height: 48px; }
.chat-link {
  justify-self: start; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.chat-done { gap: 16px; outline: 0; }
.chat-done .overline { margin-bottom: 0; }
.chat-done .related { background: var(--surface-2); }

@keyframes chat-pop { from { opacity: 0; transform: scale(0.7) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes chat-breathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

.dark .chat-pill, .dark .chat-chip { background: var(--surface); }
.dark .chat-chip:hover, .dark .chat-mic:hover:not(:disabled), .dark .chat-mic.is-on { background: var(--surface-2); }
.dark .msg-bubble { background: #2C2C2E; color: var(--ink); }
.dark .chat-submit { background: var(--surface); }
.dark .chat-card, .dark .chat-done { background: var(--surface); }
.dark .chat-card .field input { background: var(--bg); }

/* On phones the nav sits at the bottom, so the dock clears it; inputs stay at 16px so iOS doesn't zoom. */
@media (max-width: 767px) {
  .chat-dock { bottom: 0; padding-bottom: 76px; }
  .chat-pill textarea { font-size: 16px; }
  .chat-bubble { max-width: 88%; }
  .chat-card, .chat-done { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-avatar::before, .chat-bubble, .chat-hello-line, .msg-bubble, .msg-a .msg-body, .chat-card, .chat-done { animation: none; }
  .chat-dots i { animation: none; }
  .chat-pill, .chat-send, .chat-mic, .chat-chip, .chat-submit { transition: none; }
}

.chat-edit { display: grid; gap: 14px; }
.chat-edit .note, .chat-done .note { font-size: 13px; color: var(--ink-3); }
.chat-done input[readonly] { font-size: 14px; }
.chat-done .btn-row .btn { height: 46px; padding: 0 22px; }