/* assistant.css — v07zz241 — floating AI project assistant (draggable bubble + chat panel) */

.aichat-root {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: var(--z-popover);
  font-family: var(--font-body);
}

/* ── the bubble ── */
.aichat-bubble {
  width: 58px; height: 58px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  color: var(--fab-ink);
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-10) 75%, var(--mix-light)), var(--gold) 70%);
  box-shadow: 0 6px 20px color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 42%, transparent), 0 2px 6px rgba(0,0,0,0.25);
  transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease, filter var(--dur-2) ease;
  -webkit-user-select: none; user-select: none;
}
.aichat-bubble:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 50%, transparent), 0 3px 8px rgba(0,0,0,0.28); }
.aichat-bubble:active { cursor: grabbing; transform: scale(0.97); }
.aichat-bubble.is-open { background: linear-gradient(150deg, color-mix(in srgb, var(--taupe-5) 86%, var(--mix-light)), color-mix(in srgb, var(--ink-muted) 79%, var(--mix-dark)) 70%); box-shadow: 0 6px 18px rgba(0,0,0,0.32); }

/* ── the panel ── */
.aichat-panel {
  position: absolute;
  width: min(372px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--card-bg-solid, var(--card-bg-light-solid));
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--shade-10) 45%, transparent), 0 4px 14px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: aichatIn 160ms ease;
}
@keyframes aichatIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.aichat-panel.up   { bottom: 70px; top: auto; }
.aichat-panel.down { top: 70px; bottom: auto; }
.aichat-panel.left { right: 0; left: auto; }
.aichat-panel.right{ left: 0; right: auto; }

/* header */
.aichat-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 16%, transparent);
  background: color-mix(in srgb, var(--mix-light) 30%, transparent);
}
.aichat-head-l { min-width: 0; }
.aichat-title { font-size: var(--fs-14); font-weight: var(--fw-heavy); color: var(--ink, var(--ink-umber)); letter-spacing: var(--track-01); }
.aichat-sub { font-size: var(--fs-11); color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-2) 81%, var(--mix-light))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aichat-seg { display: inline-flex; background: color-mix(in srgb, var(--ink-muted) 12%, transparent); border-radius: var(--r-9); padding: 2px; flex: 0 0 auto; }
.aichat-seg-btn {
  font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-bold); border: 0; background: transparent;
  color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-2) 81%, var(--mix-light))); padding: 5px 10px; border-radius: var(--r-7); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.aichat-seg-btn:hover:not(:disabled) { color: var(--ink, var(--ink-umber)); }
.aichat-seg-btn.is-on { background: var(--mix-light); color: color-mix(in srgb, var(--gold-8) 77%, var(--mix-dark)); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.aichat-seg-btn:disabled { opacity: 0.6; cursor: default; }

/* message list */
.aichat-list { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.aichat-empty { color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-2) 81%, var(--mix-light))); padding: 6px 2px; }
.aichat-empty-title { font-size: var(--fs-13-5); font-weight: var(--fw-bold); color: var(--ink, var(--ink-umber)); margin-bottom: 6px; }
.aichat-empty-body { font-size: var(--fs-12-5); line-height: 1.55; }
.aichat-msg { display: flex; }
.aichat-msg--user { justify-content: flex-end; }
.aichat-msg--assistant, .aichat-msg--error { justify-content: flex-start; }
.aichat-bub {
  max-width: 86%; padding: 9px 12px; border-radius: 13px; font-size: var(--fs-13); line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.aichat-msg--user .aichat-bub { background: linear-gradient(150deg, color-mix(in srgb, var(--gold-2) 94%, var(--mix-dark)), var(--gold) 70%); color: var(--white); border-bottom-right-radius: 5px; }
.aichat-msg--assistant .aichat-bub { background: color-mix(in srgb, var(--mix-light) 62%, transparent); color: var(--ink, var(--ink-umber)); border: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent); border-bottom-left-radius: 5px; }
.aichat-msg--error .aichat-bub { background: color-mix(in srgb, var(--danger-2) 10%, transparent); color: var(--danger-2-ink); border: 1px solid color-mix(in srgb, var(--danger-2) 30%, transparent); border-bottom-left-radius: 5px; }

/* typing dots */
.aichat-typing { display: inline-flex; gap: 5px; align-items: center; padding: 12px 14px; }
.aichat-typing span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink-muted) 55%, transparent); animation: aichatBlink 1.2s infinite ease-in-out; }
.aichat-typing span:nth-child(2) { animation-delay: 0.18s; }
.aichat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes aichatBlink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* footer / input */
.aichat-foot {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--ink-muted) 16%, transparent); background: color-mix(in srgb, var(--mix-light) 30%, transparent);
}
.aichat-clear {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-2) 81%, var(--mix-light)));
  background: transparent; border: 0; cursor: pointer; padding: 8px 4px; white-space: nowrap; align-self: center;
}
.aichat-clear:hover { color: var(--danger-2-ink); }
/* v07zz639 — Hugo: "i need more space for me to see what I'm writing in the AI
   assistant." It opened at one line and capped at 110px, so anything longer than a
   sentence scrolled inside a two-line slot while you typed. Opens at ~4 lines now and
   grows to nearly half the panel before it scrolls, and it's user-resizable from the
   bottom edge for the occasional very long paste. */
.aichat-input {
  flex: 1 1 auto; resize: vertical; font: inherit; font-size: var(--fs-13); line-height: 1.45;
  max-height: 46vh; min-height: 86px; padding: 9px 11px;
  border: 1px solid var(--card-border); border-radius: 11px;
  background: color-mix(in srgb, var(--mix-light) 70%, transparent); color: var(--ink, var(--ink-umber)); outline: none;
}
.aichat-input:focus { border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.aichat-send {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--white);
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-10) 75%, var(--mix-light)), var(--gold) 70%);
  transition: filter var(--dur-1) ease, opacity var(--dur-1) ease;
}
.aichat-send:hover:not(:disabled) { filter: brightness(1.06); }
.aichat-send:disabled { opacity: 0.45; cursor: default; }
/* v716 — STOP takes the send button's exact slot while a question is in flight, so
   nothing shifts. Red so it can't be mistaken for Send at a glance, and it gets the
   same soft pulse as the typing dots to read as "this is live, you can kill it". */
.aichat-send--stop {
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-16) 84%, var(--mix-dark)), var(--danger-2) 70%);
  animation: aichat-stop-pulse var(--dur-pulse) ease-in-out infinite;
}
.aichat-send--stop:hover { filter: brightness(1.08); }
@keyframes aichat-stop-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-2) 45%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger-2) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .aichat-send--stop { animation: none; } }

/* v07zz290 — attach images (paste / upload / drag): paperclip button, the
   pending-attachment strip above the input, and images shown inside a bubble. */
.aichat-attachbtn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--mix-light) 60%, transparent);
  color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-2) 81%, var(--mix-light))); display: grid; place-items: center;
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.aichat-attachbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--ink-tan-deep); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.aichat-attachbtn:disabled { opacity: 0.45; cursor: default; }
.aichat-attachments { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.aichat-attach { position: relative; width: 54px; height: 54px; border-radius: var(--r-9); overflow: hidden; border: 1px solid var(--card-border); }
.aichat-attach img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aichat-attach-x { position: absolute; top: 2px; right: 2px; width: 17px; height: 17px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.6); color: var(--white); font-size: var(--fs-13); line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.aichat-attach-x:hover { background: rgba(0,0,0,0.82); }
.aichat-bub-imgs { display: flex; flex-wrap: wrap; gap: 5px; }
.aichat-bub-imgs:not(:last-child) { margin-bottom: 6px; }
.aichat-bub-imgs img { max-width: 190px; max-height: 190px; border-radius: var(--r-9); display: block; }
.aichat-bub-text { display: block; white-space: pre-wrap; }

/* v715 — Retry on a failed turn. Sits inside the error bubble and inherits its red,
   so it reads as part of the failure rather than a new action floating nearby. */
.aichat-retry-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--danger-2) 22%, transparent);
}
.aichat-retry {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--r-round); cursor: pointer;
  font-size: var(--fs-11-5); font-weight: var(--fw-bold); font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--danger-2) 45%, transparent); background: color-mix(in srgb, var(--cream-24) 92%, transparent); color: var(--danger-2-ink);
}
.aichat-retry:hover:not(:disabled) { background: var(--mix-light); border-color: color-mix(in srgb, var(--danger-2) 80%, transparent); }
.aichat-retry:disabled { opacity: 0.55; cursor: default; }
.aichat-retry-note { font-size: var(--fs-10-5); opacity: 0.8; white-space: normal; flex: 1 1 120px; }

@media (max-width: 560px) {
  .aichat-root { right: 14px; bottom: 14px; }
  .aichat-panel { width: calc(100vw - 28px); height: min(70vh, calc(100vh - 100px)); }
}