/* panel.js (activity.js, files.js): the Details panel — the Activity
 * timeline and Files as a third column on the sidebar ground (docked), an
 * overlay from the right below 960px (same scrim as the phone rail).
 * Docked, the column is always there and slides between 0 and its width
 * (.app's grid transition); the contents keep their open width, pinned to the
 * right, so they are revealed like a drawer instead of reflowing mid-motion.
 * The Details toggle stays at the window's right edge throughout. */

@media (min-width: 961px) {
  .app { grid-template-columns: var(--rail-w) minmax(0, 1fr) 0px; }
  .app.panel-open { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--panel-w); }
  .panel {
    position: relative;
    align-items: flex-end;
    overflow: clip;
    overflow-clip-margin: 4px; /* the resize grip straddles the edge */
    transition: border-color var(--sv-dur-base) var(--sv-ease-out);
  }
  .panel > :not(.panel-grip) { width: calc(var(--panel-w) - var(--sv-hairline-w)); flex-shrink: 0; }
  .panel > .pn-pane { flex-shrink: 1; }
  .app:not(.panel-open) .panel { border-left-color: transparent; }
  /* One Details toggle, never handed over: its icon sits right of the word at
   * the window's right edge, and while the panel is laid out (open, or still
   * sliding shut) it is pinned there over the panel's header, word folded away
   * while open. Closing, the word comes back at once and the icon never moves. */
  .panel-toggle { flex-direction: row-reverse; }
  .app:has(> .panel:not([hidden])) .panel-toggle {
    position: fixed;
    top: 26px; /* the topbar's middle */
    right: var(--sv-space-4);
    transform: translateY(-50%);
    z-index: var(--sv-z-nav);
  }
  .app.panel-open .panel-toggle .label { display: none; }
  .app:not(.panel-open):has(> .panel:not([hidden])) .topbar { padding-right: calc(var(--sv-space-4) + var(--pn-toggle-room, 0px)); }
  .panel .pn-head { min-height: 52px; padding-right: calc(var(--sv-space-4) + 40px); } /* the topbar's height; room for the toggle */
}
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  container: panel / inline-size;
  background: var(--ws-sidebar);
  border-left: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--ui-text);
}
.panel-toggle[aria-expanded="true"] { background: var(--ws-selected); color: var(--sv-ink); }
.pn-head {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 44px;
  padding: 0 var(--sv-space-4) 0 var(--sv-space-3);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}
/* Tabs: icon + word + quiet count on one baseline; one underline (.pn-ink)
 * slides to the selected tab, the pane drifts in from the side it came from. */
.pn-tabs { position: relative; display: flex; flex: 1; min-width: 0; align-self: stretch; gap: var(--sv-space-2); overflow-x: auto; scrollbar-width: none; }
.pn-tabs::-webkit-scrollbar { display: none; }
.pn-tab {
  flex: none;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--sv-ink-secondary);
  font-weight: 400;
  transition: color var(--sv-dur-fast) var(--sv-ease-out);
}
.pn-tab .icon { width: 15px; height: 15px; margin: 0 !important; color: var(--sv-ink-tertiary); transition: color var(--sv-dur-fast) var(--sv-ease-out), transform var(--sv-dur-fast) var(--sv-ease-out); }
.pn-tab:hover { color: var(--sv-ink); }
.pn-tab:hover .icon { color: var(--sv-ink-secondary); transform: translateY(-1px); }
.pn-tab[aria-selected="true"] { color: var(--sv-ink); }
.pn-tab[aria-selected="true"] .icon { color: var(--sv-ink); }
.pn-tab[aria-selected="true"] .pn-tab-label { font-weight: 500; }
.bl-tabs .pn-tab[aria-selected="true"] { border-bottom-color: var(--sv-ink); }
.pn-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--sv-ink);
  pointer-events: none;
}
.pn-ink.glide { transition: transform var(--sv-dur-base) var(--sv-ease-out), width var(--sv-dur-base) var(--sv-ease-out); }
.pn-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ws-hover);
  color: var(--sv-ink-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background var(--sv-dur-fast) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out);
}
.pn-count.zero { background: none; color: var(--sv-ink-tertiary); font-weight: 400; }
.pn-tab[aria-selected="true"] .pn-count:not(.zero) { background: var(--ws-selected); color: var(--sv-ink); }
.pn-count.bump { animation: pn-count-bump var(--sv-dur-base) var(--sv-ease-out); }
@keyframes pn-count-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); color: var(--sv-ink); }
  100% { transform: scale(1); }
}
/* A panel too narrow for every word keeps every icon and count, and only the
 * selected tab's word (the four tabs with words and the close button need
 * ~505px; the default 32rem fits them). */
@container panel (max-width: 508px) {
  .pn-tab:not([aria-selected="true"]) .pn-tab-label { display: none; }
}
.panel .pn-close { display: none; flex: none; width: 32px; justify-content: center; }
.pn-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pn-pane.pn-enter { animation: pn-pane-in var(--sv-dur-fast) var(--sv-ease-out) both; }
@keyframes pn-pane-in {
  from { opacity: 0; transform: translateX(var(--pn-from, 4px)); }
  to { opacity: 1; transform: none; }
}
.pn-empty { margin: 0; padding: var(--sv-space-4) var(--sv-space-3); color: var(--sv-ink-tertiary); font-size: var(--ui-text); }
/* A tab's empty state: its icon in a soft tile above the sentence. */
.panel :is(.pn-pane, .pn-filelists) > .pn-empty:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-6, 32px) var(--sv-space-4);
  text-align: center;
  text-wrap: balance;
  line-height: 1.5;
  animation: sv-enter-row var(--sv-dur-base) var(--sv-ease-out) both;
}
.panel :is(.pn-pane, .pn-filelists) > .pn-empty:not([hidden])::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: calc(var(--sv-radius) * 1.5);
  background: var(--pn-empty-icon) center / 20px 20px no-repeat, var(--ws-hover);
}
#pn-workflow { --pn-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4M3 7l2 2 4-4M13 6h8M13 12h8M13 18h8'/%3E%3C/svg%3E"); }
#pn-activity { --pn-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-9 4 18 3-9h4'/%3E%3C/svg%3E"); }
#pn-files { --pn-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E"); }
#pn-artifacts { --pn-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83ZM22 17.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65M22 12.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }

/* timeline: dense 28px rows, newest at the bottom */
.pn-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-4); display: grid; align-content: start; gap: 1px; }
/* the timeline's rows are Trace lines and Trace rows (trace.js): the panel
 * only sets the density, the entrances and the tones */
.pn-line, .pn-list .tr-row {
  width: 100%;
  min-height: 28px;
  animation: sv-enter-row var(--sv-dur-fast) var(--sv-ease-out) both;
}
.pn-list[data-hydrating] :is(.pn-line, .tr-row) { animation: none; }
.pn-line { padding: 2px var(--sv-space-2); }
.pn-time { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-line.attention { color: var(--sv-attention); }
.pn-line.danger { color: var(--sv-danger); }
.pn-line.steer { color: var(--sv-ink); }
/* what was asked: a muted divider between pieces of work, hidden until there is work */
.pn-turn {
  display: none;
  margin: var(--sv-space-3) 0 var(--sv-space-1);
  padding: 0 var(--sv-space-2);
  color: var(--sv-ink-tertiary);
  font-size: var(--ui-meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pn-turn:first-child { margin-top: 0; }
.pn-list.has-work .pn-turn { display: block; }
/* delegate children hang off their tool, like the transcript's .t-children */
/* consecutive tool items fold under one Trace group (same fold as the transcript's trace) */
.pn-trace .tr-list > .pn-item { margin-left: var(--sv-space-4); }
.pn-kids { margin: 1px 0 var(--sv-space-1) var(--sv-space-3); padding-left: var(--sv-space-2); border-left: 2px solid var(--sv-hairline); display: grid; gap: 1px; }
.pn-kid { font-size: var(--ui-meta); }
/* a step's technical record, opened from its row: command or input, output, diagnostics */
.pn-detail { margin: 1px 0 var(--sv-space-2) var(--sv-space-3); padding-left: var(--sv-space-2); border-left: 2px solid var(--sv-hairline); display: grid; gap: var(--sv-space-2); }
.pn-dblock { display: grid; gap: 2px; min-width: 0; }
.pn-dhead { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 500; }
.pn-dpre {
  margin: 0;
  padding: var(--sv-space-2) var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-sunken);
  max-height: 16rem;
  overflow: auto;
  font-size: 0.8125rem;
  font-family: var(--sv-font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pn-diag { margin: 0; color: var(--sv-attention); font-size: var(--ui-meta); }
.pn-dnone { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }

/* files */
.pn-filelists { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-4); display: grid; align-content: start; gap: var(--sv-space-3); }
.pn-sec { display: grid; gap: 1px; }
.pn-sec-head {
  margin: 0;
  padding: var(--sv-space-1) var(--sv-space-2);
  color: var(--sv-ink-tertiary);
  font-size: var(--ui-meta);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}
summary.pn-sec-head { cursor: pointer; border-radius: var(--sv-radius); }
summary.pn-sec-head:hover { background: var(--ws-hover); color: var(--sv-ink); }
.pn-file {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  width: 100%;
  min-height: 40px;
  padding: 2px var(--sv-space-2);
  border: 0;
  border-radius: var(--sv-radius);
  background: none;
  color: var(--sv-ink);
  font: 400 var(--ui-text) / 1.3 var(--sv-font-sans);
  text-align: left;
  transition: background var(--sv-dur-instant) var(--sv-ease-out);
}
.pn-file:hover { background: var(--ws-hover); }
.pn-fname { flex: 1; min-width: 0; display: grid; }
.pn-fname strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-fdir { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* viewer (v1 .artifact-reader head/note/body, panel-sized) */
.pn-viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pn-vhead {
  display: flex;
  flex-wrap: wrap; /* a narrow panel (a phone) puts the actions under the name, not the name a letter per line */
  align-items: flex-start;
  gap: var(--sv-space-2);
  padding: var(--sv-space-3);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}
.pn-vtitle { flex: 1 1 10rem; min-width: 0; display: grid; gap: 2px; }
.pn-vpath { font-weight: 500; overflow-wrap: anywhere; }
.pn-vsize { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }
.pn-vactions { display: flex; flex-wrap: wrap; flex: none; max-width: 100%; gap: var(--sv-space-1); }
.pn-vnote { margin: 0; padding: var(--sv-space-2) var(--sv-space-3); color: var(--sv-ink-secondary); font-size: var(--ui-meta); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.pn-vbody { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--sv-surface-sunken); }
.pn-doc { padding: var(--sv-space-3); background: var(--sv-surface); min-height: 100%; }
.pn-code {
  margin: 0;
  padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-2) 0;
  counter-reset: ln;
  font: 400 0.8125rem / 1.5 var(--sv-font-mono);
  color: var(--sv-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pn-ln { display: block; position: relative; min-height: 1.5em; padding-left: 4em; counter-increment: ln; }
.pn-ln::before {
  content: counter(ln);
  position: absolute;
  left: 0;
  width: 3em;
  text-align: right;
  color: var(--sv-ink-tertiary);
  user-select: none;
}

@media (max-width: 960px) {
  .panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(90vw, 24rem);
    z-index: var(--sv-z-nav);
    border-left: 0;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.32), 0 8px 32px rgb(0 0 0 / 0.18);
    animation: sv-enter-msg var(--sv-dur-base) var(--sv-ease-out) both;
  }
  .panel .pn-close { display: inline-flex; }
  .pn-line, .pn-list .tr-row, .pn-file, .pn-tab, .pn-vactions button, .pn-close { min-height: 44px; }
}

/* the chats this one started or messaged (activity.js): one live row each, Open at its edge */
.pn-chats { padding: var(--sv-space-2) var(--sv-space-3) 0; }
.pn-chats .tr-list { gap: 1px; }
.pn-chat.tr-link { width: 100%; margin: 0; }
.pn-chat.tr-link > [data-slot="trace-line"] { flex: 1; width: auto; min-width: 0; }
/* A long newest line gives way to the title and never runs under Open. */
.pn-chat.tr-link .tr-title { flex: 0 1 auto; min-width: 4em; }
.pn-chat.tr-link .tr-desc { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
@media (max-width: 760px) { .pn-chat.tr-link { min-height: 44px; } }