/* Site-wide AI chat bubble. */
.chat-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
}

.chat-fab-btn {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease;
}
.chat-fab-btn:hover { transform: scale(1.06); }
.chat-fab-btn svg { width: 1.5rem; height: 1.5rem; transform: translateX(-2px); }

/* The panel that opens above the bubble. */
.chat-panel {
  position: absolute;
  right: 0;
  bottom: 4rem;
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100dvh - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: calc(var(--corner) + 4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.chat-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-icon-btn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--corner);
}
.chat-icon-btn:hover { color: var(--ink); background: var(--bg); }
.chat-icon-btn svg { width: 1.2rem; height: 1.2rem; }

/* Session list (recall). */
.chat-sessions {
  border-bottom: 1px solid var(--line);
  max-height: 45%;
  overflow-y: auto;
  background: var(--card);
}
.chat-sessions-list { list-style: none; margin: 0; padding: 0.25rem; }
.chat-session {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1rem 0.25rem;
}
.chat-session-open {
  flex: 1;
  text-align: left;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: var(--corner);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
}
.chat-session-open:hover { background: var(--bg); }
.chat-session-date { font-size: 0.75rem; color: var(--muted); }
.chat-session-del {
  border: none; background: none; color: var(--muted);
  cursor: pointer; padding: 0.25rem 0.4rem; border-radius: var(--corner);
}
.chat-session-del:hover { color: var(--ink); }
.chat-sessions-empty { color: var(--muted); font-size: 0.85rem; padding: 0.75rem; margin: 0; }

/* Conversation log. */
.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
}
.chat-intro { color: var(--muted); font-size: 0.9rem; margin: auto 0; text-align: center; }

.chat-msg {
  max-width: 88%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--corner);
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.92rem;
}
.chat-msg-user { align-self: flex-end; background: var(--accent); color: #fff; }
.chat-msg-assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); color: var(--ink); }

/* Rendered markdown inside assistant bubbles. */
.chat-msg.chat-md { white-space: normal; }
.chat-md > :first-child { margin-top: 0; }
.chat-md > :last-child { margin-bottom: 0; }
.chat-md p { margin: 0 0 0.5rem; }
.chat-md h1, .chat-md h2, .chat-md h3 { margin: 0.5rem 0 0.3rem; font-size: 1rem; font-weight: 600; }
.chat-md ul, .chat-md ol { margin: 0.3rem 0; padding-left: 1.25rem; }
.chat-md li { margin: 0.15rem 0; }
.chat-md a { color: inherit; text-decoration: underline; }
.chat-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: rgba(127, 127, 127, 0.18);
  padding: 0.1em 0.3em;
  border-radius: 4px;
}
.chat-md pre {
  background: rgba(127, 127, 127, 0.15);
  padding: 0.5rem 0.6rem;
  border-radius: var(--corner);
  overflow-x: auto;
  margin: 0.4rem 0;
}
.chat-md pre code { background: none; padding: 0; font-size: 0.82em; }
.chat-md blockquote {
  margin: 0.4rem 0;
  padding-left: 0.6rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

/* Write proposal / approval card. */
.chat-proposal {
  align-self: flex-start;
  max-width: 88%;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--corner);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.chat-proposal-summary { font-weight: 600; }
.chat-proposal-actions { display: flex; align-items: center; gap: 0.6rem; }
.chat-proposal-status { font-size: 0.8rem; color: var(--muted); }
.chat-proposal.is-approved { border-left-color: #2e7d32; }
.chat-proposal.is-rejected { opacity: 0.6; border-left-color: var(--muted); }
.chat-approve {
  border: none; background: var(--accent); color: #fff; cursor: pointer;
  padding: 0.35rem 0.75rem; border-radius: var(--corner); font: inherit;
}
.chat-approve:disabled { opacity: 0.5; cursor: default; }
.chat-reject {
  border: none; background: none; color: var(--muted); cursor: pointer;
  padding: 0.35rem 0.5rem; font: inherit;
}
.chat-reject:disabled { opacity: 0.5; cursor: default; }

/* Composer. */
.chat-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--line);
}
.chat-input {
  flex: 1;
  resize: none;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--corner);
  background: var(--card);
  color: var(--ink);
  max-height: 140px;
}
.chat-send {
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.chat-send:disabled { opacity: 0.5; cursor: default; }
.chat-send svg { width: 1.15rem; height: 1.15rem; }