/*
 * ai_chat.css — authenticated Chip AI floating widget.
 *
 * Styles templates/components/ai_chat_widget.html, driven by
 * static/js/controllers/ai_chat_controller.js. The launcher / slide-up panel
 * chrome (.pchat-* classes) is SHARED with the public widget and styled by
 * public_chat.css — base.html loads that file first, then this one.
 *
 * This file adds only what the authenticated widget needs on top of that
 * shared chrome:
 *   1. The marketing design tokens, scoped to .pchat. public_chat.css depends
 *      on chippie-marketing.css's :root tokens, which the authed app does NOT
 *      load. Re-declaring the ~10 it uses on .pchat lets the shared chrome
 *      render correctly here without pulling in the whole marketing stylesheet.
 *   2. The authed-only capabilities the public bot lacks: a dictation mic,
 *      tool-call cards, write-approval / invoice-draft / upgrade prompts, and
 *      the typing indicator. These use the
 *      .chat-msg--* / .chat-tool__* / .chat-*-prompt classes (distinct from the
 *      public widget's .pchat-msg--* names — no collision, and the two widgets
 *      never share a page: public_base.html vs base.html).
 *   3. A launcher lift above the mobile bottom nav (which the public surface
 *      has no equivalent of).
 */

/* ---------- Design tokens (scoped; mirror chippie-marketing.css :root) ---------- */
.pchat {
  --orange: #E85D1F;
  --orange-deep: #C44A14;
  --black: #1A1A1A;
  --green: #2E5D3B;
  --green-paid: #3F7F58;
  --sandstone: #F7F1E6;
  --white: #FFFFFF;
  --text-2: #5A5A5A;
  --border: #E7E1D4;
  --yellow: #D9A21B;
}

/* ---------- Messages container ---------- */
/* The .pchat-body (public_chat.css) owns the scroll and sandstone background;
   this is just the flex column the controller renders bubbles into. */
.ai-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-chat-messages:empty { display: none; }

.ai-chat-messages .chat-msg {
  font-size: 14.5px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* User + assistant bubbles mirror the public widget's .pchat-msg--* look. */
.ai-chat-messages .chat-msg--user {
  align-self: flex-end;
  max-width: 88%;
  background: var(--black);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}
.ai-chat-messages .chat-msg--assistant {
  align-self: flex-start;
  max-width: 88%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--black);
  padding: 10px 14px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}

/* Assistant markdown subset */
.ai-chat-messages .chat-msg--assistant .chat-md-p { margin: 0 0 8px; }
.ai-chat-messages .chat-msg--assistant .chat-md-p:last-child { margin-bottom: 0; }
.ai-chat-messages .chat-msg--assistant .chat-md-list {
  margin: 4px 0 8px;
  padding-left: 20px;
}
.ai-chat-messages .chat-msg--assistant .chat-md-list:last-child { margin-bottom: 0; }
.ai-chat-messages .chat-msg--assistant .chat-md-list li { margin-bottom: 4px; }
/* `.chat-md-step` items render their own "1." / "2." prefix via .chat-md-num
   (the browser <ol> marker would double up otherwise). */
.ai-chat-messages .chat-msg--assistant .chat-md-list .chat-md-step {
  list-style: none;
  margin-left: -6px;
}
.ai-chat-messages .chat-msg--assistant .chat-md-num {
  font-weight: 600;
  color: var(--orange-deep);
  margin-right: 2px;
}
.ai-chat-messages .chat-msg--assistant .chat-md-heading {
  font-weight: 600;
  margin: 10px 0 4px;
  line-height: 1.25;
}
.ai-chat-messages .chat-msg--assistant .chat-md-heading:first-child { margin-top: 0; }
.ai-chat-messages .chat-msg--assistant .chat-entity-link {
  color: var(--orange-deep);
  font-weight: 600;
}
.ai-chat-messages .chat-msg--assistant code {
  font-size: 0.88em;
  background: var(--sandstone);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
}
.ai-chat-messages .chat-msg--assistant .chat-code {
  background: var(--sandstone);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  overflow-x: auto;
  margin: 6px 0;
  font-size: 0.85em;
}

/* ---------- Tool-call cards ---------- */
.ai-chat-messages .chat-msg--tool {
  align-self: flex-start;
  max-width: 92%;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-size: 12.5px;
  font-style: italic;
}
.ai-chat-messages .chat-tool__spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--orange);
  animation: chat-tool-spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.ai-chat-messages .chat-tool__check {
  color: var(--green-paid);
  font-style: normal;
  flex-shrink: 0;
}
.ai-chat-messages .chat-tool__label { flex: 1 1 auto; min-width: 0; }
.ai-chat-messages .chat-tool__deferred {
  background: rgba(217, 162, 27, 0.18);
  color: #8a6d00;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.9em;
  font-style: normal;
  flex-shrink: 0;
}
.ai-chat-messages .chat-tool--running { animation: chat-tool-fadein 0.18s ease-out; }
@keyframes chat-tool-spin { to { transform: rotate(360deg); } }
@keyframes chat-tool-fadein {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Typing indicator ---------- */
.ai-chat-messages .chat-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}
.ai-chat-messages .chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-2);
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}
.ai-chat-messages .chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat-messages .chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Write-approval / invoice-draft prompt ---------- */
.ai-chat-messages .chat-write-prompt {
  align-self: stretch;
  background: rgba(217, 162, 27, 0.1);
  border: 1px solid rgba(217, 162, 27, 0.4);
  border-left: 4px solid var(--yellow);
  border-radius: 10px;
  padding: 12px 14px;
}
.ai-chat-messages .chat-write-prompt__title {
  font-weight: 600;
  color: #8a6d00;
  margin-bottom: 4px;
}
.ai-chat-messages .chat-write-prompt__body {
  margin-bottom: 10px;
  white-space: pre-wrap;
  color: var(--black);
  font-size: 14px;
}
.ai-chat-messages .chat-write-prompt__actions {
  display: flex;
  gap: 8px;
}

/* Invoice draft card — editable fields inside the approval prompt */
.ai-chat-messages .chat-invoice-draft {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-chat-messages .chat-invoice-draft__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ai-chat-messages .chat-invoice-draft__label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-2);
}
.ai-chat-messages .chat-invoice-draft__value {
  font-size: 14px;
  color: var(--black);
}
.ai-chat-messages .chat-invoice-draft__input {
  font-size: 16px; /* >=16px stops iOS Safari zooming the page on focus */
}

/* ---------- Subscription upgrade prompt ---------- */
.ai-chat-messages .chat-upgrade-prompt {
  align-self: stretch;
  background: rgba(232, 93, 31, 0.08);
  border: 1px solid rgba(232, 93, 31, 0.3);
  border-left: 4px solid var(--orange);
  border-radius: 10px;
  padding: 12px 14px;
}
.ai-chat-messages .chat-upgrade-prompt__title {
  font-weight: 600;
  color: var(--orange-deep);
  margin-bottom: 4px;
}
.ai-chat-messages .chat-upgrade-prompt__body {
  color: var(--black);
  font-size: 14px;
}

/* ---------- Dictation mic (sits left of the send button) ---------- */
.pchat-mic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--text-2);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pchat-mic:hover { color: var(--orange-deep); border-color: var(--orange); }
/* dictation_controller swaps the icon to bi-stop-circle-fill and adds .btn-danger
   while recording. .pchat-mic is not a Bootstrap .btn, so .btn-danger is inert on
   its own — paint the recording state here. */
.pchat-mic.btn-danger {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}
/* The dictation timer/waveform badges and the "Transcribing…" overlay are
   inserted by the shared dictation_controller as absolutely-positioned children
   of the input row, with hardcoded top:0.5rem / inset:0 meant for a tall quote
   textarea. In this compact one-line bar they overlap the field, so re-anchor
   them to float just ABOVE the bar instead. The controller is shared with the
   quote forms — override here, never there. */
.pchat .pchat-input-row { position: relative; }

/* Timer badge + waveform canvas: lift out of the bar, keep their right offsets.
   top is set inline (style.cssText) so it needs !important to override. */
.pchat .pchat-input-row > .badge,
.pchat .pchat-input-row > canvas {
  top: auto !important;
  bottom: calc(100% + 0.5rem);
}

/* "Transcribing…" label: drop inset:0 (which covered the whole bar) and render
   it as a small pill floating above the bar, left-aligned. */
.pchat .pchat-input-row > .whisper-overlay {
  inset: auto;
  bottom: calc(100% + 0.5rem);
  left: 0.75rem;
  width: auto;
  padding: 4px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-2);
}

/* The shimmer wash assumed a textarea-sized field; suppress it in the bar. */
.pchat .pchat-input-row > .whisper-overlay-shimmer { display: none; }

/* ---------- Send button: spinner / icon swap ---------- */
.pchat-send .ai-chat-spinner {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}
.pchat-send .ai-chat-spinner[hidden],
.pchat-send .ai-chat-sendicon[hidden] { display: none; }

/* ---------- Mobile: lift launcher above the bottom nav ---------- */
/* The bottom nav (mobile-nav.css, z-index 1000, ~64px tall) is shown below
   992px via .d-lg-none. The launcher (z-index 1050) sits above it, but at the
   default bottom:20px it overlaps. The public full-screen sheet only kicks in
   below 768px, so lift the *closed* launcher across the whole mobile-nav range.
   When open below 768px, public_chat.css's inset:0 sheet overrides this.
   The 28px gap (vs the nav's 64px) gives clear separation above the bar,
   matching where the old floating feedback button sat. */
@media (max-width: 991.98px) {
  .pchat--app:not(.pchat--open) {
    bottom: calc(64px + 28px + var(--mobile-nav-safe-bottom));
  }
}

/* ---------- Mobile: bottom-anchor the transcript ---------- */
/* Mirrors public_chat.css. The full-screen sheet kicks in below 768px; a short
   conversation should hug the input row so the on-screen keyboard meets the
   last message instead of a gap. When the transcript outgrows the body the auto
   margin collapses and it scrolls normally. */
@media (max-width: 767px) {
  .ai-chat-messages { margin-top: auto; }
}