/* The chat shell's own styles — loaded by every page that wears it.
 *
 * These lived in app.css, which the studio loads and the Consultant does not. Leaving them
 * there would have meant the shared behaviour arriving at /chat with none of its appearance:
 * a find bar with no box, a Latest pill with no pill, an offline warning that reads as body
 * text, and a 22px touch target on a phone.
 *
 * The rule is the one that decided chatshell.js: if it would look the same in a chat about
 * kitchen extensions and a chat that builds a wall, it lives here. Anything about the studio's
 * own thread — the frame cards, the measured ledger, the build narration — stays in app.css.
 */

/* A FINGER IS 44px AND THESE WERE 22 AND 34 — MEASURED ON A 375px PHONE.
 *
 * send 34x34, edit 22x22, copy 22x22. The send button is also the STOP button now, which makes
 * it the one control on the screen you press when something is going wrong and costing money,
 * and it was the hardest to hit. The tap gate passed throughout: it checks the studio's tools
 * and the dock, not the chat's own furniture, so none of this was ever measured.
 *
 * The BOX does not grow — growing the send button reflows the composer, and growing the two
 * handles would put a 44px target over the text of the message next to it. The hit area grows
 * instead, through a transparent ::before that reaches out past the edges. The finger gets its
 * 44px, the layout does not move a pixel, and nothing is drawn differently.
 *
 * Pointer-coarse only. On a mouse a 22px target is comfortable and an invisible 44px one just
 * steals clicks from whatever is beside it. */
@media (pointer: coarse) {
  .dz-send, .dz-edit, .dz-copy, .cv-borrow { position: relative; }
  .dz-send::before, .dz-edit::before, .dz-copy::before, .cv-borrow::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
    /* Behind the glyph so it never covers the icon, and never a paint of its own. */
    z-index: 0;
  }
  /* The handles are permanently visible on touch — there is no hover to reveal them, so a rule
     that leaves them at opacity 0 leaves a phone with an invisible control over a 44px target.
     Scoped through .dz-turn to outrank the base `.dz-edit { opacity: 0 }`, which is written
     further down this file and would otherwise win at equal specificity. Measured: it did. */
  .dz-turn .dz-edit, .dz-turn .dz-copy { opacity: .55; }
}

/* NO CONNECTION. Amber, not red: nothing has failed and nothing was lost — the studio simply
   cannot reach anything right now, and what is on screen is still yours. Sits above the
   composer, where the next thing you try to do is. */
.dz-offline {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 10px;
  border-radius: 9px; font-size: 12px; line-height: 1.35;
  color: #f0d9a8; background: rgba(240,190,90,.12); border: 1px solid rgba(240,190,90,.3);
}
.dz-offline svg { flex: 0 0 auto; opacity: .9; }

/* THE DAY A STRETCH OF CONVERSATION BELONGS TO. A rule with the day sitting in it — the same
   shape every messaging app uses, because it reads as a boundary rather than as a message. */
.dz-day {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 2px 10px; color: var(--ink-3, #8b93a1);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.dz-day::before, .dz-day::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line, rgba(255,255,255,.09));
}
.dz-day span { flex: 0 0 auto; }
/* The hour, beside the speaker. Small and quiet: it is a lookup, not a headline, and a loud
   timestamp on every line is noise in the conversations that happen in one sitting. */
.dz-turn .who time {
  margin-left: 7px; font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink-3, #8b93a1); opacity: .62;
  font-variant-numeric: tabular-nums;
}
.dz-turn:hover .who time { opacity: 1; }

/* "LATEST" — shown only while the thread is holding still because you scrolled up, so it is
   never on screen during ordinary use. It sits above the composer, over the thread. */
/* The pill is absolute, so the column it hangs in has to be its containing block. Without this
   it positions against the page and lands somewhere else entirely on a narrow layout. */
.dz-col { position: relative; }
.dz-jump {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px 4px 8px;
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text, #e7ecf3);
  background: var(--surface-2, rgba(30,34,44,.94));
  border: 1px solid var(--line, rgba(255,255,255,.14));
  box-shadow: 0 4px 14px rgba(0,0,0,.34);
}
.dz-jump:hover { background: rgba(124,156,255,.24); border-color: rgba(124,156,255,.4); }

/* EDIT, on your own turns. Invisible until the turn is hovered, because a control on every
   message you have ever sent is clutter on a document you are trying to read. It does not
   rewrite the past — it lifts the words back into the box. */
.dz-turn.me { position: relative; }
.dz-edit {
  position: absolute; top: 2px; right: 0; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 6px; cursor: pointer;
  color: var(--ink-3, #8b93a1); background: transparent; border: 1px solid transparent;
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.dz-turn.me:hover .dz-edit, .dz-edit:focus-visible { opacity: .65; }
.dz-edit:hover { opacity: 1; color: #fff; background: rgba(124,156,255,.22); }

/* COPY, on the studio's answers — same box and same manners as Edit, other side of the
   conversation. Turns green for a moment on success, because a copy that says nothing leaves
   you pressing it twice. */
.dz-turn.bot { position: relative; }
.dz-copy {
  position: absolute; top: 2px; right: 0; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 6px; cursor: pointer;
  color: var(--ink-3, #8b93a1); background: transparent; border: 1px solid transparent;
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.dz-turn.bot:hover .dz-copy, .dz-copy:focus-visible { opacity: .65; }
.dz-copy:hover { opacity: 1; color: #fff; background: rgba(124,156,255,.22); }
.dz-copy.ok { opacity: 1; color: #8ef0bd; background: rgba(120,255,190,.18); }

/* FINDING SOMETHING IN A LONG CONVERSATION. A thread that runs for a day is a document, and a
   document you cannot search is one you scroll. Matches are marked in place rather than
   filtered to a list, because the answer is usually "where was that" and the surrounding
   exchange is the thing that makes it make sense. */
.dz-find {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 0 0 6px;
  border-radius: 9px; background: var(--surface-2, rgba(255,255,255,.05));
  border: 1px solid var(--line, rgba(255,255,255,.09));
}
.dz-find input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text, #e7ecf3); font: inherit; font-size: 12px; padding: 2px 0;
}
.dz-find .dz-find-n { font-size: 11px; color: var(--ink-3, #8b93a1); font-variant-numeric: tabular-nums; }
.dz-find button {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 6px; border: 1px solid transparent; background: transparent;
  color: var(--ink-3, #8b93a1); cursor: pointer; font: inherit; font-size: 13px; line-height: 1;
}
.dz-find button:hover { color: #fff; background: rgba(255,255,255,.1); }
.dz-hit { background: rgba(255,214,102,.26); border-radius: 6px; }
.dz-hit.on { background: rgba(255,214,102,.62); color: #1a1508; }

/* THE SEND ARROW, WHILE A TURN IS RUNNING. Same box, same place — it becomes a square and it
   becomes pressable, because Stop is the one control that must never be the disabled one. Red
   enough to read as an interruption, not so red it reads as an error: nothing has gone wrong. */
/* #design-send IS IN THE SELECTOR BECAUSE app.css PAINTS IT BY ID.
 *
 * `.dz-send, #design-send { background: #4f6ddc }` is an ID selector and beats two classes, so
 * in the studio the square went on being the same blue as the arrow — the one state that has to
 * read as an interruption looked identical to the one that sends. Reported as "the stop mark
 * should be red", and it already was: everywhere except the place people actually press it. */
.dz-send.stopping, #design-send.stopping {
  background: rgba(255,120,120,.22); border-color: rgba(255,120,120,.42); color: #ffdede;
}
.dz-send.stopping:hover, #design-send.stopping:hover { background: rgba(255,120,120,.34); color: #fff; }
/* And the line it leaves behind. A stop is a fact, not a failure, so it is grey like a note —
   the error bubble's red would say something went wrong when nothing did. */
.dz-stopped {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-3, #8b93a1); font-size: 13px;
}
.dz-stopped svg { opacity: .8; flex: 0 0 auto; }