/* Trimzio AI panel
 *
 * Sits on top of style.css and uses its custom properties throughout, so the
 * panel follows the editor theme — dark, light, and whatever accent the Page
 * Designer sets — without a single hard-coded colour of its own.
 *
 * Tokens borrowed from style.css:
 *   surfaces  --panel  --panel-2  --elev
 *   lines     --border  --border-strong
 *   ink       --text  --text-dim
 *   colour    --accent  --accent-2  --green  --danger
 *   shape     --radius  --radius-sm  --ring
 *   motion    --ease
 *
 * Type scale, so the panel reads as three levels rather than nine:
 *   13px  body and chat
 *   12px  controls, list rows, secondary text
 *   11px  captions, notes, uppercase labels
 */

/* ---------- hiding ----------
 *
 * The panel hides sections by setting the `hidden` attribute from JS. That
 * attribute only carries `display: none` from the UA stylesheet, so any rule
 * here giving an element `display: flex` beats it and the section stays on
 * screen — which is why the gate card, the composer, the starter chips and a
 * red "AI is not set up" error could all be visible at the same time. One
 * declaration makes `hidden` mean hidden again, everywhere in the panel.
 */

.trz-ai [hidden] { display: none !important; }

/* ---------- shared icon sizing ---------- */

.trz-ai .trz-ai-i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
}

/* ---------- tab ---------- */

.tab.trz-ai-tab .tab-ico {
  display: block;
  color: #a78bfa;
}

.tab.trz-ai-tab .tab-ico svg {
  width: 17px;
  height: 17px;
}

.tab.trz-ai-tab:hover .tab-ico,
.tab.trz-ai-tab.active .tab-ico {
  color: inherit;
}

/* ---------- panel shell ----------
 *
 * Two bands: a fixed header and one scrolling column. The typing box used to
 * be a third band pinned to the bottom; it now lives at the top of the Chat
 * tab, directly above the conversation it produces, so there is nothing left
 * to pin. The panel itself must not scroll, hence the overridden padding and
 * overflow.
 */

#panelAI.trz-ai {
  display: none;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  gap: 0;
}

#panelAI.trz-ai.active {
  display: flex;
}

.trz-ai-head {
  flex: 0 0 auto;
  padding: 14px 18px 10px;
}

.trz-ai-head h2 {
  margin: 0 26px 6px 0;
}

.trz-ai .trz-ai-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.trz-ai-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Everything in the scrolling column keeps its natural height. Left to the
   flexbox default of shrink:1 the tools kit gets compressed and, because it
   clips its own overflow, loses the bottom half of its last row rather than
   letting the column scroll. */
.trz-ai-scroll > * { flex: 0 0 auto; }

/* The mode bar, typing box and request counter form one highlighted card.
   This makes the place to start an AI edit easy to spot without competing
   with the conversation and suggestion rows below it. */
.trz-ai-ask {
  margin: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  border-radius: var(--radius);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent) 10%, var(--panel)) 0%,
      var(--panel) 72%
    );
  box-shadow:
    0 8px 24px -18px color-mix(in srgb, var(--accent) 75%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The conversation window carries `hidden` until something is said, so an
   empty frame never sits between the tools and the suggestions. */
.trz-ai-log:empty { display: none; }

/* ---------- gate card (not configured / sign in / no access) ---------- */

.trz-ai-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--accent) 12%, transparent) 0%,
      transparent 70%),
    var(--panel-2);
}

.trz-ai-card-ico {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--accent);
}

.trz-ai-card-ico .trz-ai-i {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}

.trz-ai-card strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  margin-bottom: 5px;
}

.trz-ai-card p {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.trz-ai-card p:last-child { margin-bottom: 0; }

.trz-ai-card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.trz-ai-card-actions .btn {
  text-decoration: none;
}

/* ---------- transcript ----------
 *
 * A small window rather than an unbounded column. It scrolls inside itself
 * and holds the newest turn at the top, so the answer a person just asked
 * for is the thing they are already looking at, and a long conversation
 * cannot push the tools or the suggestions off the panel.
 */

.trz-ai-logwrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
}

/* The header and the "Clear conversation?" band take turns in the same strip.
   One rule, one min-height and border-box sizing, or the strip changes height
   as they swap and shoves the whole conversation down a row. */
.trz-ai-log-head,
.trz-ai-log-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  box-sizing: border-box;
  padding: 4px 6px 4px 10px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}

.trz-ai-log-head {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.trz-ai-log-note {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .75;
}

/* Sentence case, not the header's uppercase. Set in caps, "Clear this
   conversation?" measured 190px against 274px of usable strip and pushed the
   buttons onto a second line. Hence this wording, and "Clear" / "Cancel". */
.trz-ai-log-q {
  font-weight: 600;
  color: var(--text);
}

.trz-ai-log-q-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* `.trz-ai-log-confirm button` is (0,1,1); a bare `.trz-ai-clear-go` at (0,1,0)
   loses to it and the destructive button comes out the same grey as Cancel.
   Both are scoped under the band for that reason. */
.trz-ai-log-confirm button {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  transition: color .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease);
}

/* Flat --danger measured 3.41:1 on the light theme's strip and this is 11px
   text. The mix every other danger-tinted label here uses gives 6.19:1 light,
   6.56:1 dark. */
.trz-ai-log-confirm .trz-ai-clear-go {
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
}

.trz-ai-log-confirm .trz-ai-clear-go:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}

.trz-ai-log-confirm .trz-ai-clear-no:hover {
  color: var(--text);
  background: var(--elev);
}

/* Focused as an announcement, not as a control. */
.trz-ai-log-confirm:focus { outline: none; }

.trz-ai-log {
  min-height: 0;
  max-height: 260px;
  max-height: min(260px, 38vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 9px 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A card waiting on Accept or Cancel is exempt from the cap. Those buttons at
   the bottom of it are the whole point of the card, and hunting for them by
   scrolling a 260px box is exactly the moment not to make someone work. The
   panel's own column takes the overflow instead. */
.trz-ai-logwrap.awaiting .trz-ai-log {
  max-height: none;
  overflow: visible;
}

.trz-ai-msg {
  display: flex;
  max-width: 100%;
}

.trz-ai-body {
  font-size: 13px;
  line-height: 1.55;
  border-radius: var(--radius);
  padding: 8px 11px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.trz-ai-user {
  justify-content: flex-end;
}

.trz-ai-user .trz-ai-body {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
  max-width: 88%;
  box-shadow: var(--shadow-1);
}

.trz-ai-assistant .trz-ai-body {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  max-width: 92%;
}

/* The old error style used a fixed pink that washed out on the light theme.
   Deriving from --danger keeps it legible in both. */
.trz-ai-error .trz-ai-body {
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
  max-width: 100%;
}

.trz-ai-body code {
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.trz-ai-body strong { font-weight: 650; }

/* thinking dots */

.trz-ai-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 13px;
}

.trz-ai-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: trz-ai-blink 1.2s infinite ease-in-out;
}

.trz-ai-dots i:nth-child(2) { animation-delay: .18s; }
.trz-ai-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes trz-ai-blink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-2px); }
}

/* ---------- cards: applied edits, proposals, consent, upsell ---------- */

.trz-ai-edits {
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: color-mix(in srgb, var(--green) 7%, var(--panel));
}

.trz-ai-edits.all-failed {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--panel));
}

.trz-ai-edits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.trz-ai-edits-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.005em;
  min-width: 0;
}

.trz-ai-edits-title .trz-ai-i { opacity: .85; }

.trz-ai-undo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 3px 9px 3px 7px;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease);
}

.trz-ai-undo .trz-ai-i { width: 12px; height: 12px; }

.trz-ai-undo:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
  background: var(--elev);
}

.trz-ai-undo:disabled {
  opacity: .5;
  cursor: default;
}

.trz-ai-edits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trz-ai-edits-list li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

.trz-ai-edit-ico {
  flex: 0 0 auto;
  width: 13px;
  height: 17px;              /* aligns the glyph with the first line of text */
  display: flex;
  align-items: center;
  justify-content: center;
}

.trz-ai-edit-ico .trz-ai-i { width: 13px; height: 13px; }

/* A plain step has no icon at all — a small dot, so the text still aligns. */
.trz-ai-edit-ico:empty::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}

.trz-ai-edits-list li.ok    .trz-ai-edit-ico { color: var(--green); }
.trz-ai-edits-list li.bad   .trz-ai-edit-ico { color: var(--danger); }
.trz-ai-edits-list li.risky .trz-ai-edit-ico { color: var(--accent-2); }
.trz-ai-edits-list li.plain .trz-ai-edit-ico { color: var(--text-dim); }

.trz-ai-edits-list li.bad .trz-ai-edit-text {
  color: color-mix(in srgb, var(--danger) 65%, var(--text));
}

/* ---------- starter chips ---------- */

.trz-ai-starters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.trz-ai-starter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.trz-ai-chip {
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  text-align: left;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease);
}

.trz-ai-chip:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}

.trz-ai-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 2px 4px 2px 0;
  border-radius: var(--radius-sm);
  transition: color .18s var(--ease);
}

.trz-ai-more .trz-ai-i {
  width: 13px;
  height: 13px;
  transition: transform .18s var(--ease);
}

.trz-ai-more.open .trz-ai-i { transform: rotate(180deg); }
.trz-ai-more:hover { color: var(--text); }

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

.trz-ai-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.trz-ai-input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;                /* the panel is 312px wide; a drag handle here
                                  only lets people bury the rest of the UI */
  min-height: 46px;
  max-height: 132px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-strong));
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease);
}

.trz-ai-input::placeholder { color: var(--text-dim); opacity: 1; }

.trz-ai-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: var(--ring), inset 0 1px 2px rgba(0, 0, 0, .04);
}

.trz-ai-input:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.trz-ai-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow:
    0 6px 16px -7px color-mix(in srgb, var(--accent) 85%, transparent),
    0 1px 2px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: background .18s var(--ease), box-shadow .18s var(--ease),
              transform .06s var(--ease);
}

.trz-ai-send .trz-ai-send-i { display: flex; }
.trz-ai-send .trz-ai-i {
  width: 18px;
  height: 18px;
}

.trz-ai-send:hover {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
  box-shadow:
    0 8px 20px -8px color-mix(in srgb, var(--accent) 90%, transparent),
    0 2px 4px rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

.trz-ai-send:active { transform: translateY(1px); }

.trz-ai-send:focus-visible {
  outline: none;
  box-shadow: var(--ring), 0 8px 20px -8px color-mix(in srgb, var(--accent) 90%, transparent);
}

/* stop button while a request is in flight */

.trz-ai-send.trz-ai-stop {
  background: color-mix(in srgb, var(--danger) 16%, var(--panel-2));
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
  box-shadow: none;
}

.trz-ai-send.trz-ai-stop:hover {
  background: color-mix(in srgb, var(--danger) 24%, var(--panel-2));
  box-shadow: none;
}

.trz-ai-status {
  margin: 0;
  min-height: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
}

/* ---------- mode bar ----------
 *
 * Above the input, not below it. These three controls change what pressing
 * Send does, and a person reads top to bottom.
 */

.trz-ai-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-dim);
}

.trz-ai-modes {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-2);
}

.trz-ai-mode {
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 4px 11px;
  line-height: 1.4;
  transition: color .18s var(--ease), background .18s var(--ease);
}

.trz-ai-mode + .trz-ai-mode {
  border-left: 1px solid var(--border);
}

.trz-ai-mode:hover:not(.active) {
  color: var(--text);
  background: var(--elev);
}

.trz-ai-mode.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.trz-ai-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.trz-ai-check input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.trz-ai-check:hover { color: var(--text); }

.trz-ai-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: 999px;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.trz-ai-clear:hover {
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--panel));
}

/* ---------- proposal / consent / upsell variants ---------- */

.trz-ai-edits.trz-ai-proposal {
  border-left-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 8%, var(--panel));
}

/* The card is focused when it appears so a screen reader reads the whole list
   before anyone can accept it. That is an announcement, not a control, so it
   shows no ring of its own — the buttons inside it still do. */
.trz-ai-edits.trz-ai-proposal:focus { outline: none; }

/* Twenty changes in one answer would still be a card taller than the panel,
   so the list itself is the part that scrolls. The title stays above it and
   the buttons stay below it, always both on screen. */
.trz-ai-proposal .trz-ai-edits-list,
.trz-ai-consent .trz-ai-edits-list {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.trz-ai-proposal-note {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-dim);
}

.trz-ai-impact {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}

.trz-ai-impact-title {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.trz-ai-impact-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.trz-ai-impact-fact {
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--panel);
  font-size: 10px;
  line-height: 1.2;
}

.trz-ai-impact-fact.is-safe {
  color: #40c983;
  border-color: color-mix(in srgb, #40c983 36%, var(--border));
}

.trz-ai-impact-fact.is-change {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}

.trz-ai-impact-fact.is-warn {
  color: #f6ad55;
  border-color: color-mix(in srgb, #f6ad55 40%, var(--border));
}

.trz-ai-impact-blockers {
  margin: 0;
  padding-left: 17px;
  color: color-mix(in srgb, var(--danger) 74%, var(--text));
  font-size: 11px;
}

.trz-ai-proposal-actions {
  justify-content: flex-start;
  margin-top: 9px;
}

.trz-ai-edits.trz-ai-consent {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.trz-ai-consent-body p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.trz-ai-consent-body .trz-ai-consent-note {
  opacity: .8;
}

.trz-ai-edits.trz-ai-upsell {
  border-left-color: #a78bfa;
  background: color-mix(in srgb, #a78bfa 10%, var(--panel));
}

/* ---------- inline follow-up actions ---------- */

.trz-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trz-ai-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text-dim);
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease);
}

.trz-ai-act .trz-ai-i { width: 12px; height: 12px; }

.trz-ai-act:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--elev);
}

.trz-ai-act.accent {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}

.trz-ai-act.accent:hover {
  background: color-mix(in srgb, var(--accent) 24%, var(--panel-2));
}

/* ---------- long-running progress ---------- */

.trz-ai-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 2px;
}

.trz-ai-progress-text {
  font-variant-numeric: tabular-nums;
}

/* ---------- the tool kit: three tabs ----------
 *
 * Tools, Recipes and Chat are the same kind of thing — one way in, picked
 * from a strip — so they share one frame and take turns in it. As accordions
 * they could all be open, all be shut, and change the panel's height under
 * the pointer; as tabs exactly one is showing, always.
 */

.trz-ai-kit {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
}

/* Equal columns, however many tabs there are. */
.trz-ai-kit-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}

/* Three labels share the 312px the two used to. 11px and a tighter gap keep
   the longest of them, Recipes, on one line: a wrapped tab strip is twice as
   tall for no more information. */
.trz-ai-kit-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 9px 5px;
  transition: color .18s var(--ease), background .18s var(--ease);
}

.trz-ai-kit-tab .trz-ai-i { width: 14px; height: 14px; flex: 0 0 auto; }

.trz-ai-kit-tab + .trz-ai-kit-tab { border-left: 1px solid var(--border); }

.trz-ai-kit-tab .trz-ai-i { color: currentColor; opacity: .85; }

.trz-ai-kit-tab:hover:not(.is-on) { color: var(--text); background: var(--elev); }

.trz-ai-kit-tab.is-on {
  color: var(--text);
  background: var(--panel);
}

.trz-ai-kit-tab.is-on .trz-ai-i { color: var(--accent); opacity: 1; }

/* Sits on top of the strip's own border, so the selected tab joins the body
   below it instead of being fenced off from it. */
.trz-ai-kit-tab.is-on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

.trz-ai-kit-note {
  margin: 0;
  padding: 7px 10px 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
  background: var(--panel);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.trz-ai-kit-body {
  background: var(--panel);
}

/* ---------- the Chat tab ----------
 *
 * The conversation window used to be a bordered box of its own below the kit.
 * Inside the kit frame that border would be a second box drawn just inside the
 * first, so in here it gives up its own edges and the frame holds it.
 */

.trz-ai-chat > .trz-ai-logwrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.trz-ai-chat > .trz-ai-starters {
  padding: 9px 10px 10px;
}

/* Only once there is something above them to be separated from. */
.trz-ai-chat > .trz-ai-logwrap:not([hidden]) + .trz-ai-starters {
  border-top: 1px solid var(--border);
}

.trz-ai-chat-off {
  margin: 0;
  padding: 11px 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* One plain list, not a grid of little boxes.
 *
 * The tools used to be four bordered tiles two abreast. In a 312px column
 * every label wrapped to two lines, and the eight borders plus the separately
 * styled "Shorten to" row read as five competing objects. A single column of
 * flat rows separated by hairlines is one object with five entries: the
 * labels fit on one line, the icons line up, and the only borders left are
 * the ones that separate.
 */

.trz-ai-tool-list {
  display: flex;
  flex-direction: column;
}

.trz-ai-tool-list > * + * {
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.trz-ai-tool {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  transition: color .18s var(--ease), background .18s var(--ease);
}

.trz-ai-tool .trz-ai-i { color: var(--text-dim); transition: color .18s var(--ease); }
.trz-ai-tool > span { min-width: 0; }

.trz-ai-tool:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.trz-ai-tool:hover:not(:disabled) .trz-ai-i { color: var(--accent); }

.trz-ai-tool:disabled { opacity: .5; cursor: not-allowed; }

/* The one row that takes an argument. Same height and same left edge as the
   plain tools, so it sits in the list rather than under it. */
.trz-ai-tool-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text);
}

.trz-ai-tool-row label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  cursor: pointer;
}

.trz-ai-tool-row label .trz-ai-i { color: var(--text-dim); }

.trz-ai-tool-go {
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text-dim);
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease);
}

.trz-ai-tool-go:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
}

.trz-ai-tool-go:disabled { opacity: .5; cursor: not-allowed; }

.trz-ai-shorten {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
}

/* ---------- suggestions ---------- */

.trz-ai-suggest {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trz-ai-suggest-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: .8;
  padding: 0 2px;
}

.trz-ai-suggest-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  transition: border-color .18s var(--ease);
}

.trz-ai-suggest-item:hover { border-color: var(--border-strong); }

.trz-ai-suggest-ico {
  flex: 0 0 auto;
  display: flex;
  color: var(--accent);
}

.trz-ai-suggest-ico .trz-ai-i { width: 16px; height: 16px; }

.trz-ai-suggest-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.trz-ai-suggest-body strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.trz-ai-suggest-why {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trz-ai-suggest-go {
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  color: var(--text);
  transition: background .18s var(--ease);
}

.trz-ai-suggest-go:hover { background: color-mix(in srgb, var(--accent) 26%, var(--panel-2)); }

.trz-ai-suggest-no {
  flex: 0 0 auto;
  display: flex;
  cursor: pointer;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  opacity: .55;
  transition: opacity .18s var(--ease), background .18s var(--ease);
}

.trz-ai-suggest-no .trz-ai-i { width: 12px; height: 12px; }

.trz-ai-suggest-no:hover { opacity: 1; background: var(--elev); }

/* ---------- saved workflows ---------- */

.trz-ai-workflow-tools,
.trz-ai-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trz-ai-workflow-tools {
  padding: 8px 10px 6px;
  border-top: 1px solid var(--border);
}

.trz-ai-workflow-tools > span:first-child,
.trz-ai-activity-head > span {
  min-width: 0;
}

.trz-ai-workflow-tools strong,
.trz-ai-workflow-tools small,
.trz-ai-activity-head strong,
.trz-ai-activity-head small {
  display: block;
}

.trz-ai-workflow-tools strong,
.trz-ai-activity-head strong {
  color: var(--text);
  font-size: 11px;
}

.trz-ai-workflow-tools small,
.trz-ai-activity-head small {
  margin-top: 1px;
  color: var(--text-dim);
  font-size: 9px;
}

.trz-ai-workflow-actions {
  display: inline-flex;
  gap: 4px;
}

.trz-ai-wf-export,
.trz-ai-wf-import,
.trz-ai-activity-clear,
.trz-ai-activity-run {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--panel);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.trz-ai-wf-export,
.trz-ai-wf-import,
.trz-ai-activity-clear {
  padding: 3px 7px;
}

.trz-ai-wf-export:hover,
.trz-ai-wf-import:hover,
.trz-ai-activity-clear:hover,
.trz-ai-activity-run:hover {
  color: var(--text);
  border-color: var(--accent);
}

.trz-ai-workflows {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 10px 8px;
}

.trz-ai-wf-empty {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
  opacity: .8;
}

.trz-ai-wf {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-2);
  max-width: 100%;
}

.trz-ai-wf-run,
.trz-ai-wf-del {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 4px 10px;
  min-width: 0;
  transition: color .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease);
}

.trz-ai-wf-run .trz-ai-i,
.trz-ai-wf-del .trz-ai-i { width: 11px; height: 11px; }

.trz-ai-wf-run > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trz-ai-wf-del {
  padding: 4px 8px;
  border-left: 1px solid var(--border);
  opacity: .55;
}

.trz-ai-wf-run:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.trz-ai-wf-del:hover {
  opacity: 1;
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
}

.trz-ai-wf-status {
  min-height: 14px;
  margin: 0;
  padding: 0 10px 7px;
  color: #40c983;
  font-size: 10px;
}

.trz-ai-wf-status.is-error {
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
}

.trz-ai-activity {
  padding: 8px 10px 9px;
  border-top: 1px solid var(--border);
}

.trz-ai-activity-clear:disabled {
  opacity: .45;
  cursor: default;
}

.trz-ai-activity-list {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.trz-ai-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.trz-ai-activity-copy {
  min-width: 0;
}

.trz-ai-activity-copy strong,
.trz-ai-activity-copy small {
  display: block;
}

.trz-ai-activity-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trz-ai-activity-copy small {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1.35;
}

.trz-ai-activity-run {
  padding: 3px 8px;
  white-space: nowrap;
}

.trz-ai-activity-empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.4;
}

/* ---------- focus ----------
 *
 * Every interactive thing in the panel gets the editor's own focus ring. The
 * previous stylesheet defined none at all, so a keyboard user got a
 * border-colour change on some controls and nothing on the rest.
 */

.trz-ai button:focus-visible,
.trz-ai summary:focus-visible,
.trz-ai select:focus-visible,
.trz-ai input:focus-visible,
.trz-ai a:focus-visible,
.tab.trz-ai-tab:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

.trz-ai .trz-ai-chip:focus-visible,
.trz-ai .trz-ai-act:focus-visible,
.trz-ai .trz-ai-tool-go:focus-visible,
.trz-ai .trz-ai-undo:focus-visible,
.trz-ai .trz-ai-suggest-go:focus-visible,
.trz-ai .trz-ai-wf-run:focus-visible,
.trz-ai .trz-ai-wf-del:focus-visible {
  border-radius: 999px;
}

/* The tool rows and the three kit tabs run edge to edge inside `.trz-ai-kit`,
   which clips its overflow — an outset ring would lose its left and right
   sides, so those get an inset one. */
.trz-ai .trz-ai-tool:focus-visible,
.trz-ai .trz-ai-kit-tab:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 0;
}

/* Same clipping, and these must out-specify `.trz-ai button:focus-visible`
   above, which is (0,2,1) — a bare `.trz-ai-clear:focus-visible` at (0,2,0)
   loses to it and comes out outset. */
.trz-ai .trz-ai-log-head .trz-ai-clear:focus-visible,
.trz-ai .trz-ai-log-confirm button:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 999px;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .trz-ai *,
  .trz-ai *::after {
    transition: none !important;
  }
  .trz-ai-dots i { animation: none; opacity: .6; }
}

/* ---------- narrow / mobile bottom sheet ---------- */

@media (max-width: 760px) {
  .trz-ai-head   { padding: 12px 14px 8px; }
  .trz-ai-scroll { padding: 0 14px 10px; }
  .trz-ai-ask    { padding: 9px 10px 11px; }

  /* Thumbs, not cursors. */
  .trz-ai-chip,
  .trz-ai-act,
  .trz-ai-mode,
  .trz-ai-tool-go,
  .trz-ai-suggest-go { padding-top: 6px; padding-bottom: 6px; }

  .trz-ai-tool { padding-top: 11px; padding-bottom: 11px; }

  /* A bottom sheet is short; the transcript takes a smaller share of it. */
  .trz-ai-log { max-height: min(200px, 30vh); }
}