/* Developer console — header button + right-hand drawer.
   Scoped under .devc-* so it can never restyle the bank UI, and it borrows
   the app's tokens (--ink, --line, --accent…) so it still looks native. */

.devc-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(18, 20, 26, 0.1);
  background: var(--card, #fff);
  color: var(--muted, #6b7383);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.devc-btn:hover { color: var(--ink, #12141a); }

.devc-btn.active {
  color: var(--accent, #1a4fff);
  border-color: rgba(26, 79, 255, 0.28);
  background: rgba(26, 79, 255, 0.08);
}

.devc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 20, 26, 0.28);
  opacity: 0;
  transition: opacity 0.26s ease;
  z-index: 70;
}

.devc-scrim.in { opacity: 1; }

.devc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(640px, 96vw);
  background: var(--bg, #fbfbfa);
  border-left: 1px solid var(--line, rgba(18, 20, 26, 0.09));
  box-shadow: -18px 0 48px rgba(18, 20, 26, 0.14);
  z-index: 71;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.devc-drawer.in { transform: none; }

.devc-head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line-soft, rgba(18, 20, 26, 0.07));
}

.devc-head-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.devc-titles { flex: 1; min-width: 0; }

/* The list's own controls, under the title: one button draws every turn in
   the conversation, and the counter beside it says how far along that is. */
.devc-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.devc-all {
  height: 32px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(26, 79, 255, 0.35);
  background: rgba(26, 79, 255, 0.1);
  color: var(--accent, #1a4fff);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.devc-all:hover:not(:disabled) { background: rgba(26, 79, 255, 0.18); }

.devc-all:disabled {
  opacity: 0.55;
  border-color: rgba(18, 20, 26, 0.12);
  background: rgba(18, 20, 26, 0.04);
  color: var(--muted, #6b7383);
}

.devc-progress {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted, #6b7383);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devc-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink, #12141a);
}

.devc-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6b7383);
  margin-top: 2px;
}

.devc-close {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(18, 20, 26, 0.1);
  background: var(--card, #fff);
  color: var(--muted, #6b7383);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.devc-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 20, 26, 0.16) transparent;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.devc-empty {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #6b7383);
  padding: 10px 4px;
}

.devc-turn {
  border: 1px solid var(--line, rgba(18, 20, 26, 0.09));
  border-radius: 16px;
  background: var(--card, #fff);
  overflow: hidden;
  /* Keep the card's own height. The list above is a column flex box, so a
     card is a flex ITEM, and a flex item's automatic minimum size — the
     thing that normally stops it being squashed below its content — only
     applies while its overflow is `visible`. `overflow: hidden` (here, for
     the rounded corners) drops that minimum to zero, so the browser was
     shrinking open cards to fit the list instead of letting the list
     scroll, and the card then clipped its own diagram. Hence: an open card
     is as tall as it is, and the list scrolls. */
  flex-shrink: 0;
}

/* Every card is open, so this is a heading rather than a control — no
   pointer, nothing to click. */
.devc-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  text-align: left;
}

.devc-row-main { flex: 1; min-width: 0; display: block; }

.devc-row-title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #12141a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devc-row-meta {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, #6b7383);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devc-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(18, 20, 26, 0.05);
  color: var(--muted, #6b7383);
}

.devc-badge.running { background: rgba(26, 79, 255, 0.1); color: var(--accent, #1a4fff); }
.devc-badge.error { background: rgba(181, 62, 62, 0.1); color: var(--red, #b53e3e); }
/* A turn the server remembers rather than one this tab recorded. Worth
   distinguishing: it is the card whose diagram cannot be redrawn. */
.devc-badge.saved { background: rgba(107, 63, 212, 0.12); color: #6b3fd4; }

/* A diagram already exists for this turn — green says so at a glance,
   without touching the status badge (running/error keep their own
   meaning). With every card open the diagram itself is the real answer, so
   this stays a border and a title colour: flooding a dozen open cards with
   a green ground would drown the charts they contain. */
.devc-turn.has-flow { border-color: rgba(10, 138, 74, 0.35); }
.devc-turn.has-flow .devc-row { background: rgba(10, 138, 74, 0.07); }
.devc-turn.has-flow .devc-row-title { color: var(--green, #0a8a4a); }

.devc-body {
  border-top: 1px solid var(--line-soft, rgba(18, 20, 26, 0.07));
  padding: 12px 12px 10px;
}

/* An undrawn turn: one line and its own button, not an empty grey stage —
   with nothing collapsed, a dozen placeholder boxes would be the drawer. */
.devc-idle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.devc-idle-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted, #6b7383);
}

/* The turn whose trace was not kept: a statement, not a failure, so it
   reads quieter than .devc-error and wraps like the sentence it is. */
.devc-lost {
  display: block;
  text-align: left;
  line-height: 1.5;
  padding: 2px 2px 4px;
}

/* The diagram itself. A horizontal flow gets long, so the chart scrolls
   inside this box in BOTH directions and is capped in height — it never
   pushes the drawer sideways and never pushes the card's own buttons off
   the bottom of the list. */
.devc-stage {
  overflow: auto;
  overscroll-behavior: contain;
  max-height: min(68vh, 620px);
  border-radius: 12px;
  background: #fcfcfb;
  border: 1px solid var(--line-soft, rgba(18, 20, 26, 0.07));
  padding: 12px;
  min-height: 90px;
  /* NOT a flex box, and nothing here centres an overflowing child. Centring
     inside a scroll container puts half the overflow BEFORE the content's
     start edge, and a scrollbar cannot reach back past its own origin — so
     a tall TD diagram had its top half parked where no scroll could go,
     which read as "it will not scroll down". A block scroller overflows in
     one direction only, and all of it is reachable. */
  display: block;
  text-align: center;              /* centres the chart while it still fits */
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 20, 26, 0.16) transparent;
}

/* Overflowing (.actual): start-aligned, for that same reason. Only "fit" is
   centred, and in fit mode there is by definition nothing to scroll to. */
.devc-stage.actual { text-align: left; }

/* Default (.actual): the diagram keeps the size it was drawn at and this
   box scrolls — labels stay readable however long the flow is. "Sığdır"
   drops the class and scales the whole thing into view instead. */
.devc-stage svg { display: inline-block; vertical-align: top;
                  max-width: 100%; height: auto; margin: 0; }

.devc-stage.actual svg { max-width: none; }

/* "Sığdır" has to fit in BOTH axes. Capping only the width is enough for a
   wide LR flow but does nothing for a TD/TB one: a tall narrow chart is
   already inside the width, so it stayed exactly as tall as it was drawn
   and kept scrolling. With a height cap the fit button finally means fit —
   and a diagram too big to read at that size belongs in "Tam ekran". */
.devc-stage:not(.actual) svg {
  max-height: min(64vh, 560px);
  width: auto;
  height: auto;
}

/* ── Fullscreen ────────────────────────────────────────────────────────────
   A 640px drawer is the wrong container for a long flow — vertical for TD,
   horizontal for LR. This is the same SVG with the whole viewport to sit
   in: it scrolls at natural size, or fits entirely with one click. */
.devc-full {
  position: fixed;
  inset: 0;
  z-index: 80;                       /* above the drawer (71) and its scrim */
  display: flex;
  flex-direction: column;
  background: var(--bg, #fbfbfa);
}

.devc-full-bar {
  flex-shrink: 0;                  /* the stage below scrolls, not this */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, rgba(18, 20, 26, 0.09));
  background: var(--card, #fff);
}

.devc-full-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devc-full-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: block;                  /* block scroller, same reason as above */
  text-align: center;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 20, 26, 0.16) transparent;
}

.devc-full-stage.actual { text-align: left; }

.devc-full-stage svg { display: inline-block; vertical-align: top;
                       max-width: 100%; max-height: calc(100dvh - 130px);
                       width: auto; height: auto; margin: 0; }
.devc-full-stage.actual svg { max-width: none; max-height: none; }

.devc-stage::-webkit-scrollbar { width: 7px; height: 7px; }
.devc-stage::-webkit-scrollbar-thumb {
  background: rgba(18, 20, 26, 0.16);
  border-radius: 4px;
}

.devc-note,
.devc-loading,
.devc-error {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted, #6b7383);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.devc-error { color: var(--red, #b53e3e); font-weight: 600; }

/* The stage stopped centring its child when it became a block scroller, so
   the two states that are a line of text rather than a diagram place
   themselves. */
.devc-stage .devc-loading,
.devc-stage .devc-error { justify-content: center; padding: 20px 0; }

.devc-spark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #1a4fff);
  animation: devcPulse 1.2s ease-in-out infinite;
}

@keyframes devcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.75); }
}

.devc-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  flex-wrap: wrap;      /* four buttons + a model tag on a phone */
}

/* Only shown when the diagram really does continue past the edge — macOS
   overlay scrollbars leave no other sign of it. */
.devc-hint {
  display: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #6b7383);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(18, 20, 26, 0.05);
  white-space: nowrap;
}

.devc-stage.scrolls ~ .devc-foot .devc-hint { display: inline; }

.devc-model {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #6b7383);
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.devc-mini:disabled { opacity: 0.6; }

.devc-mini {
  height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(18, 20, 26, 0.12);
  background: var(--card, #fff);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink, #12141a);
}

.devc-mini:hover { border-color: rgba(26, 79, 255, 0.35); color: var(--accent, #1a4fff); }

/* Mermaid source is 20+ lines with the palette block — capped and
   scrollable in BOTH directions, or one card swallows the whole drawer
   and pushes its own buttons out of reach. */
.devc-src {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #12141a;
  color: #e8eaf0;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  line-height: 1.5;
  max-height: min(38vh, 280px);
  overflow: auto;
  overscroll-behavior: contain;
  white-space: pre;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.devc-src::-webkit-scrollbar { width: 7px; height: 7px; }
.devc-src::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .devc-drawer, .devc-scrim { transition: none; }
  .devc-spark { animation: none; }
}