/* ============================================================
   studio-chat — the "Chat with AI assistant" pane that composes OVER
   the studio-deck. Extracted VERBATIM from figma/studio-card-chat.html
   so the flow's Chat button opens the SAME left assistant pane.
   The deck component itself is untouched — the controller (studio-chat.js)
   only intercepts the deck's [data-act="chat"] action.
   Tokens mirror studio-deck.css (pink #0b0b0b → gold #8a8a8a, navy).
   ============================================================ */
:root {
  --ca-pink: #0b0b0b;
  --ca-gold: #8a8a8a;
  --ca-grad: linear-gradient(90deg, #0b0b0b 0%, #8a8a8a 100%);
  --ca-navy: #11243d;
  --ca-line: #ececec;
  --ca-font-display: "Manrope", system-ui, sans-serif;
  --ca-font-body: "Inter", system-ui, sans-serif;
}

/* dim scrim behind the pane — scoped to the CARD (not the page), so it only
   dims the card region. Rounded to match the card (== studio-deck --r-card). */
.ca-scrim {
  position: absolute; inset: 0;
  background: rgba(17, 36, 61, .20);
  border-radius: 32px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 40;
}
.ca-scrim.is-open { opacity: 1; visibility: visible; }

/* the pane itself — lives INSIDE the card, slides out from the card's own
   left edge, bounded by the card's height + left corners. */
.ca-pane {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: clamp(290px, 36%, 384px);
  background: #fff;
  display: flex; flex-direction: column;
  border-radius: 32px 0 0 32px;
  box-shadow: 22px 0 52px -26px rgba(15, 15, 30, .5);
  transform: translateX(-100%);
  visibility: hidden;
  overflow: hidden;
  will-change: transform;
  z-index: 41;
  font-family: var(--ca-font-body);
}

/* header */
.ca-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 16px;
}
.ca-head h2 {
  font-family: var(--ca-font-display);
  font-weight: 700; font-size: 19px;
  color: var(--ca-navy); letter-spacing: -.01em;
}
.ca-x {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: #6b6b73; transition: background .18s ease, color .18s ease;
}
.ca-x:hover { background: #f3f3f5; color: #1d1d1f; }
.ca-x svg { width: 15px; height: 15px; }

/* conversation log */
.ca-log {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 8px 20px 14px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
}
.ca-log::-webkit-scrollbar { width: 7px; }
.ca-log::-webkit-scrollbar-thumb { background: #e2e2e6; border-radius: 99px; }

/* empty hint shown before the first exchange */
.ca-empty {
  margin: auto; text-align: center; color: #9a9aa0;
  font-size: 13.5px; line-height: 1.5; max-width: 230px;
  padding: 40px 0;
}
.ca-empty b { display: block; color: var(--ca-navy); font-family: var(--ca-font-display); font-size: 15px; margin-bottom: 6px; font-weight: 700; }

/* message bubbles */
.ca-msg { display: flex; max-width: 86%; }
.ca-msg__b {
  font-size: 13.5px; line-height: 1.5;
  padding: 10px 14px; border-radius: 16px;
  white-space: pre-wrap; word-break: break-word;
}
.ca-msg.user { align-self: flex-end; }
.ca-msg.user .ca-msg__b {
  background: var(--ca-grad); color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 8px 18px -10px rgba(11, 11, 11, .55);
}
.ca-msg.bot { align-self: flex-start; }
.ca-msg.bot .ca-msg__b {
  background: #f4f5f7; color: #2c2c33;
  border-bottom-left-radius: 5px;
}

/* typing indicator */
.ca-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.ca-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: #b9bcc4;
  animation: ca-bounce 1.1s infinite ease-in-out;
}
.ca-typing i:nth-child(2) { animation-delay: .16s; }
.ca-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes ca-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }

/* footer: analyze CTA + input bar */
.ca-foot { flex: 0 0 auto; padding: 12px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.ca-analyze {
  width: 100%; border: 0; cursor: pointer;
  font-family: var(--ca-font-display); font-weight: 700; font-size: 14px;
  color: #fff; padding: 13px 16px; border-radius: 12px;
  background: var(--ca-grad);
  box-shadow: 0 12px 26px -14px rgba(11, 11, 11, .6);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.ca-analyze:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(11, 11, 11, .7); }
.ca-analyze:active { transform: translateY(0); }
.ca-analyze:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.ca-input {
  display: flex; align-items: flex-end; gap: 8px;
  background: #f4f5f7; border: 1.5px solid #ececec;
  border-radius: 18px; padding: 7px 7px 7px 16px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ca-input.is-armed {
  border-color: rgba(11, 11, 11, .55);
  box-shadow: 0 0 0 4px rgba(11, 11, 11, .12);
  background: #fff;
}
.ca-field {
  flex: 1 1 auto; border: 0; outline: 0; resize: none; background: transparent;
  font-family: var(--ca-font-body); font-size: 14px; line-height: 1.45;
  color: #1d1d1f; max-height: 96px; padding: 6px 0;
}
.ca-field::placeholder { color: #9a9aa0; }
.ca-send {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--ca-navy); color: #fff;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
}
.ca-send:hover { transform: scale(1.06); }
.ca-send:disabled { opacity: .4; cursor: default; transform: none; }
.ca-send svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .ca-typing i { animation: none; }
}

/* narrow cards (deck stacks to single column ≤880px): the pane covers the
   whole card instead of a 36% column, so the assistant stays usable. */
@media (max-width: 880px) {
  .ca-pane { width: 100%; border-radius: 32px; }
}