/* ==========================================================================
   turns.css — Turn container, tool items, collapsible chat sections.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══ TURN CONTAINER — one per Claude turn, wraps reasoning + tool rows ══ */
.turn-ctr {
  margin: 2px auto 8px;
  width: 100%; max-width: var(--content-max);
  border: 1px solid var(--b1);
  border-inline-start: 3px solid var(--gb);
  border-radius: var(--r2);
  background: var(--s1);
  overflow: hidden;
  /* overflow:hidden sets flex min-size to 0 — prevent collapse in flex column */
  flex-shrink: 0;
  transition: border-inline-start-color .2s;
}
.turn-ctr:hover { border-inline-start-color: var(--gbs); }

/* Turn header — always visible */
.turn-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 8px;
  cursor: pointer; user-select: none;
  color: var(--t2);
  transition: color .15s, background .12s;
  min-height: 36px;
}
.turn-hdr:hover { color: var(--t1); background: var(--gd); }
.turn-label {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600; font-family: var(--fh);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--t2);
}
.tc-group-running {
  display: flex; gap: 3px; align-items: center; flex-shrink: 0;
}
.tc-group-running .adot {
  width: 5px; height: 5px; border-radius: var(--rf);
  background: var(--amber);
  animation: dotPulse 1.4s ease infinite;
}
.tc-group-running .adot:nth-child(2) { animation-delay: .2s; }
.tc-group-running .adot:nth-child(3) { animation-delay: .4s; }

/* Chevron shared by turn header and tool items */
.tc-chevron {
  flex-shrink: 0; color: var(--t3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  transition: transform .24s var(--ease);
}
.tc-chevron.open { transform: rotate(90deg); }

/* Turn expandable body — grid collapse animation */
.turn-body {
  display: grid; grid-template-rows: 0fr;
  /* Pin the single column to the container width. Without an explicit column
     the implicit grid column is `auto` → sized to content max-content; when
     the body collapses, .turn-body-inner stops being a scroll container and
     long tool hints / unbreakable tokens blow the column (and the whole
     section) far wider than the viewport, then get clipped → "broken" look.
     minmax(0,1fr) forces content to wrap/scroll inside the column instead. */
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows .25s var(--ease);
  /* 'clip' cuts at border-box edge without creating a scroll container;
     more reliable than 'hidden' during CSS grid row animation */
  overflow: clip;
}
.turn-body.open { grid-template-rows: 1fr; }

/* Inner body — vertical padding removed from here (causes bleed during 0fr collapse).
   Spacing comes from first/last-child margins instead. */
.turn-body-inner {
  min-height: 0;
  overflow-x: clip;
  padding-inline: 10px 12px; /* horizontal only */
  border-top: 1px solid transparent;
  transition: border-top-color .15s;
}
.turn-body.open .turn-body-inner {
  border-top-color: var(--b1);
  overflow-y: auto;
  max-height: 520px;
}
/* Vertical spacing via children so it doesn't interfere with collapse */
.turn-body-inner > :first-child { margin-top: 6px; }
.turn-body-inner > :last-child { margin-bottom: 10px; }
.turn-body-inner::-webkit-scrollbar { width: 3px; }
.turn-body-inner::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }

/* ── Collapsible chat exchange sections ──────────────────────────────────
   Each user question + its reply form one section. The user row is the
   header (with a chevron); the reply/tools/artifacts sit in a grid-collapse
   body, identical mechanism to .turn-body. */
.chat-section { width: 100%; margin: 0 auto; max-width: var(--content-max); }
.chat-section .cs-hdr-row.msg-row { margin-bottom: 6px; align-items: center; gap: 6px; }
/* Chevron lives on the user (header) row */
.cs-chevron {
  flex-shrink: 0; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--t3); align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--r1);
  transition: transform .24s var(--ease), color .12s, background .12s;
}
.cs-chevron:hover { color: var(--t1); background: var(--gd); }
.cs-chevron.open { transform: rotate(90deg); }
/* Collapsed sections read as a tidy list of questions — dim the chevron a touch */
.chat-section:not(.open) .cs-chevron { color: var(--t2); }
/* Body collapse — same grid-row trick as .turn-body */
.chat-sec-body {
  display: grid; grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);   /* see .turn-body note — pin column width */
  transition: grid-template-rows .25s var(--ease);
  overflow: clip;
}
.chat-sec-body.open { grid-template-rows: 1fr; }
.chat-sec-inner { min-height: 0; overflow: clip; }
/* When collapsed, give the header row a subtle affordance on hover */
.chat-section:not(.open) .cs-hdr-row.msg-row { opacity: .92; }
.chat-section:not(.open):hover .cs-hdr-row.msg-row { opacity: 1; }

/* Individual tool item inside turn container */
.tc-item {
  border-inline-start: 2px solid var(--b1);
  padding-inline-start: 10px;
  margin: 2px 0;
  border-radius: 0 var(--r1) var(--r1) 0;
  transition: border-inline-start-color .15s, background .12s;
}
.tc-item:hover { border-inline-start-color: var(--gbs); background: var(--gd); }

.tc-item-hdr {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 4px;
  cursor: pointer; user-select: none;
  border-radius: var(--r1); color: var(--t2);
  transition: color .12s;
  min-height: 30px;
}
.tc-item-hdr:hover { color: var(--t1); }

.tc-item-sdot {
  width: 6px; height: 6px;
  border-radius: var(--rf); flex-shrink: 0;
  transition: background .2s;
}
.tc-item-sdot.running { background: var(--amber); animation: dotPulse 1.4s ease infinite; }
.tc-item-sdot.succeeded { background: var(--green); }
.tc-item-sdot.failed { background: var(--red); }
.tc-item-sdot.unknown { background: var(--t3); }

.tc-item-icon { font-size: 12px; flex-shrink: 0; line-height: 1; }
.tc-item-label {
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; max-width: 55%;
  color: var(--t1);
}
.tc-item-hint {
  font-size: 11px; color: var(--t3); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  direction: ltr; text-align: left;
  padding-inline-start: 4px;
}

/* Item expandable body */
.tc-item-body {
  display: grid; grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);   /* see .turn-body note — pin column width */
  transition: grid-template-rows .22s var(--ease);
  overflow: clip; /* clip prevents scroll-container artefacts during animation */
}
.tc-item-body.open { grid-template-rows: 1fr; }
.tc-item-body-inner { min-height: 0; }
.tc-item-body.open .tc-item-body-inner {
  padding-block: 4px 8px;
  padding-inline: 0 2px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 280px;
}
.tc-item-body-inner::-webkit-scrollbar { width: 3px; height: 3px; }
.tc-item-body-inner::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }

/* JSON/text inside item body */
.tc-section-label {
  font-size: 9px; font-weight: 700; color: var(--t3);
  letter-spacing: .7px; text-transform: uppercase;
  margin: 6px 0 3px;
}
.tc-section-label:first-child { margin-top: 2px; }
.tc-json {
  font-family: 'Cascadia Code','Fira Code','Courier New',monospace;
  font-size: 10px; color: var(--t2); direction: ltr; text-align: left;
  white-space: pre-wrap; word-break: break-all;
  max-height: 180px; overflow-y: auto;
  background: var(--s2); border-radius: var(--r1); border: 1px solid var(--b0);
  padding: 5px 8px; margin-bottom: 2px;
}
.tc-file-path { color: var(--g); font-weight: 600; }
.tc-file-link {
  color: var(--g); font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.tc-file-link:hover { color: var(--gl); }

/* Reasoning text inside turn container — plain italic dim text, no box */
.turn-rsn {
  padding-block: 4px 5px;
  padding-inline-start: 8px;
  padding-inline-end: 2px;
  color: var(--t3);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: start;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-style: italic;
  border-inline-start: 2px solid var(--b1);
  margin: 2px 0 4px;
}
/* Live variant: slightly brighter while streaming, subtle pulse border */
.turn-rsn-live {
  border-inline-start-color: var(--gbs);
  color: var(--t2);
}
.turn-rsn + .tc-item { margin-top: 3px; }
.tc-item + .turn-rsn { margin-top: 4px; }

/* Compact artifact reference inside turn container */
.tc-artifact-ref {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px 4px 8px;
  margin: 3px 0;
  background: var(--gd);
  border: 1px solid var(--gb);
  border-radius: var(--r1);
  min-width: 0;
}
.tc-art-ref-icon {
  font-size: 12px; flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tc-art-ref-name {
  flex: 1; font-size: 11.5px; font-weight: 600; color: var(--t1);
  direction: ltr; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tc-art-ref-size {
  font-size: 10px; color: var(--t3); flex-shrink: 0; white-space: nowrap;
}
.tc-art-ref-btn {
  color: var(--t2); padding: 3px; border-radius: var(--r1);
  transition: color .15s, background .15s; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; min-width: 22px; min-height: 22px;
}
.tc-art-ref-btn:hover { color: var(--g); background: var(--gb); }
.tc-art-ref-btn svg { display: block; }