/*
  The assistant panel in the Studio.

  Bottom-right, stacked above the run dock rather than beside it. Bottom-left was
  the obvious free corner and the wrong one: on a wide screen the nav is a column
  down the left, so a bubble parked there sat on top of the last two entries in
  it — a permanent fixture covering the way out of the page.

  So it shares the right-hand corner with the dock and climbs by `--dock-h`, the
  height the dock publishes for exactly this. It in turn publishes `--chat-h`,
  and toasts climb by both: a toast lasts four seconds and a panel does not, so
  the transient thing is the one that moves.
*/

.studio-chat {
  position: fixed;
  right: var(--sp-5);
  bottom: calc(var(--sp-5) + var(--dock-h, 0px));
  z-index: 89;
  display: flex;
  flex-direction: column;
  /* The bubble is narrower than the panel, and hugs the same edge. */
  align-items: flex-end;
  /*
    Only the two things inside catch a tap; the box holding them does not.

    On a phone this element is pinned to both edges — see the bottom of this
    file — so that the panel can be the width of the screen. The bubble is a
    quarter of that, but the box around it stayed the full width, and being
    fixed and above the page it swallowed every tap along the band it sat in.
    Nothing was visibly in the way, which made it look like the buttons either
    side of it had simply stopped working.
  */
  pointer-events: none;
}

.studio-chat-panel,
.studio-chat-bubble {
  pointer-events: auto;
}

/*
  Gone while anything is open over the page.

  It sits at 89 so that it clears the run dock at 88, which puts it above the
  dialogs at 85 and the full-screen editors at 86 as well. In the corner of a
  wide screen that was merely untidy. On a phone a dialog fills the screen, so
  the bubble landed in the middle of it, on top of whichever button happened to
  be in that corner — usually the one that confirms.

  Lowering it under the dialogs was the other way out, but it would have to go
  under the dock too, and the dock is the thing it is stacked on: they would
  overlap the moment a job was running. Out of the way is also simply better —
  a dialog is a question, and the assistant is not part of answering it.

  `.overlaid` is published by core/layers.js, so every overlay that takes the
  back gesture is covered, including ones not yet written. The `:has` catches
  the small dialogs, which cover the page without claiming a history entry.

  Hidden rather than removed: a hidden element is not a target for a tap either,
  and it keeps its size, which the bubble is measured for — see `lift`. Taken out
  of the layout it would measure zero, and the height it publishes for the toasts
  to climb by would stay zero after the dialog closed.
*/
body.overlaid .studio-chat,
body:has(.modal) .studio-chat {
  visibility: hidden;
}

/* ------------------------------------------------------------------ bubble */

.studio-chat-bubble {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--s2) 92%, transparent);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(6px);
}

.studio-chat-bubble:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.studio-chat-bubble .icon {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------------- panel */

.studio-chat-panel {
  display: flex;
  flex-direction: column;
  /* Tall enough for a conversation to have a shape, short enough that the
     timeline underneath is still the thing on the screen. */
  width: min(420px, calc(100vw - var(--sp-5) * 2));
  height: min(620px, calc(100vh - 140px));
  background: color-mix(in srgb, var(--s2) 95%, transparent);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.studio-chat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 6px 6px var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.studio-chat-auto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.studio-chat-auto:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
}

.studio-chat-auto input {
  margin: 0;
}

/* -------------------------------------------------------------- transcript */

.studio-chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
}

.studio-chat-turn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
}

.studio-chat-said {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* The person's own words sit to the right and read as said rather than
   written: it is the shape every chat has, and reading a transcript depends on
   telling the two apart at a glance. */
.studio-chat-turn.you {
  align-items: flex-end;
}

.studio-chat-turn.you .studio-chat-said {
  max-width: 85%;
  background: color-mix(in srgb, var(--accent) 18%, var(--s3));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  white-space: pre-wrap;
}

.studio-chat-turn.ai .studio-chat-said {
  background: var(--s3);
  border: 1px solid var(--border);
}

.studio-chat-said p {
  margin: 0 0 var(--sp-2);
}

.studio-chat-said p:last-child,
.studio-chat-said ul:last-child {
  margin-bottom: 0;
}

.studio-chat-said ul {
  margin: 0 0 var(--sp-2);
  padding-left: 18px;
}

.studio-chat-said code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--s1);
  font-family: var(--mono, monospace);
  font-size: 12px;
}

.studio-chat-head-line {
  display: block;
  margin-bottom: 4px;
}

.studio-chat-dots {
  display: inline-flex;
  gap: 4px;
  margin-right: var(--sp-2);
  vertical-align: middle;
}

.studio-chat-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: studio-chat-pulse 1.2s infinite ease-in-out;
}

.studio-chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.studio-chat-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes studio-chat-pulse {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-chat-dots i { animation: none; opacity: 0.6; }
}

/* ------------------------------------------------------------------ frames */

/* What it was looking at. Small, in a row, and scrollable rather than wrapped:
   they are evidence for the sentence above them, not the content. */
.studio-chat-frames {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.studio-chat-frame {
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex: none;
}

.studio-chat-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.4;
}

.studio-chat-bad {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--danger);
  border-radius: var(--r-sm);
  color: var(--danger);
  font-size: 12px;
}

.studio-chat-bad span {
  flex: 1;
}

/* --------------------------------------------------------------- proposals */

.studio-chat-edits {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.studio-chat-edits-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
}

.studio-chat-edits-head strong {
  flex: 1;
}

.studio-chat-edit-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.45;
}

.studio-chat-edit-list li {
  margin-bottom: 3px;
}

.studio-chat-edit-list em {
  display: block;
  font-size: 11px;
  font-style: normal;
}

.studio-chat-edit-acts {
  gap: var(--sp-2);
}

/* -------------------------------------------------------------- first words */

.studio-chat-hello {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: auto 0;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
}

.studio-chat-hello p {
  margin: 0;
}

.studio-chat-seeds {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-chat-seed {
  padding: 7px var(--sp-3);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.studio-chat-seed:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--fg);
}

/* ---------------------------------------------------------------- composer */

.studio-chat-ask {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-top: 1px solid var(--border);
}

.studio-chat-box {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 160px;
  padding: 9px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--s1);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  resize: none;
}

.studio-chat-box:focus {
  outline: none;
  border-color: var(--accent);
}

/* Below this the nav is a bar across the bottom instead of a column down the
   left — the same obstacle on the other axis, so the bubble has to clear it. The
   height is the tab bar's own: a 52px minimum plus whatever the phone reserves
   under it. */
@media (max-width: 860px) {
  .studio-chat {
    bottom: calc(var(--sp-3) + 52px + env(safe-area-inset-bottom)
      + var(--dock-h, 0px));
  }
}

/* On a phone the panel is the screen: a 420px card floating over a timeline
   nobody can see anyway is worse than a sheet that owns the view while it is
   open. */
@media (max-width: 620px) {
  .studio-chat {
    left: var(--sp-3);
    right: var(--sp-3);
  }

  .studio-chat-panel {
    width: 100%;
    height: min(70vh, calc(100vh - 220px));
  }
}