/* The Workshop page (workshop.js): two columns, the chat on the left and the
   token view on the right. Every rule is scoped to the page's own classes and
   uses notion.html's color tokens, so light and dark follow the site. */
@media (min-width: 761px) { .page.ws-wide { max-width: 1320px; padding: 28px 32px 80px; } }
@media (max-width: 760px) { .page.ws-wide { padding: 20px 16px 80px; } }
.ws-wide .ws-lede { color: var(--dim); font-size: 17px; margin: -6px 0 12px; }
.ws-wide .callout p { margin: 0 0 8px; }
.ws-wide .callout p:last-child { margin: 0; }
.ws-wide select, .ws-wide .ws-btn { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; }
.ws-wide select { max-width: 100%; }
.ws-wide .ws-btn { cursor: pointer; }
.ws-wide .ws-btn:hover { background: var(--hover); }
.ws-wide .ws-quiet { color: var(--dim); }
.ws-wide .ws-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; padding: 5px 18px; }
.ws-wide .ws-primary:hover { background: var(--ink); opacity: 0.86; }
.ws-wide .ws-primary:disabled { opacity: 0.3; cursor: default; }
.ws-wide select:focus-visible, .ws-wide .ws-btn:focus-visible, .ws-tool input:focus-visible { outline: 2px solid var(--c-fg); outline-offset: 1px; }

.ws-status { margin: 12px 0 0; padding: 8px 12px; border-radius: 5px; font-size: 14px; background: var(--call); }
.ws-status.ws-warn { background: var(--w-bg); color: var(--w-fg); }
.ws-status.ws-mock { background: var(--c-bg); color: var(--c-fg); }

.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 18px; align-items: start; }
.ws-right { position: sticky; top: 46px; max-height: calc(100vh - 62px); overflow-y: auto; padding: 0 4px 12px 20px; border-left: 1px solid var(--line); }
@media (max-width: 1180px) {
  .ws-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-right { position: static; max-height: none; overflow: visible; padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.ws-right h3 { margin-top: 2px; }
.ws-right h4 { font-family: var(--title); font-size: 17px; font-weight: 500; margin: 24px 0 2px; }

.ws-k { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.ws-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ws-head .ws-k { margin-right: auto; }
.ws-mt { margin-top: 20px; }
.ws-note { font-size: 13.5px; line-height: 1.45; color: var(--dim); margin: 4px 0 8px; }
.ws-chip { display: inline-block; font-size: 12px; line-height: 1.6; padding: 0 6px; border-radius: 3px; background: var(--w-bg); color: var(--w-fg); }
.ws-chip[hidden] { display: none; }

.ws-box { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--side); color: var(--ink); font: 13.5px/1.5 var(--mono); resize: vertical; }
.ws-box:focus { outline: 2px solid var(--c-fg); outline-offset: -1px; }
.ws-box::placeholder { color: var(--faint); }
.ws-user { margin-top: 4px; font: 15px/1.45 var(--ui); }
.ws-under { margin-top: 3px; font-size: 12px; color: var(--faint); text-align: right; }
.ws-over { color: var(--e-fg); }
.ws-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.ws-tools { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.ws-tools legend { padding: 0; }
.ws-tool { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: 14px; cursor: pointer; }
.ws-tool input { margin: 4px 0 0; accent-color: var(--c-fg); }
.ws-tool span { color: var(--dim); }
.ws-tool b { color: var(--ink); font-weight: 600; }

.ws-chat { display: flex; flex-direction: column; gap: 8px; min-height: 140px; max-height: 56vh; overflow-y: auto; margin-top: 6px; padding: 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.ws-msg { max-width: 86%; padding: 7px 11px; border-radius: 10px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-you { align-self: flex-end; background: var(--c-bg); border-bottom-right-radius: 3px; }
.ws-it { align-self: flex-start; background: var(--call); border-bottom-left-radius: 3px; }
.ws-card { align-self: flex-start; max-width: 92%; padding: 6px 10px; font-size: 13.5px; border: 1px solid var(--line); border-left: 3px solid var(--t-fg); border-radius: 6px; background: var(--bg); }
.ws-card-err { border-left-color: var(--e-fg); }
.ws-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ws-card-k { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-fg); }
.ws-card-args { font: 12.5px var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.ws-card-body { margin-top: 2px; }
.ws-card details { margin-top: 4px; }
.ws-card summary { cursor: pointer; font-size: 12.5px; color: var(--dim); }
.ws-card pre { max-height: 14em; overflow: auto; margin: 4px 0 0; font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-meta { align-self: flex-start; margin: -2px 0 4px 2px; font-size: 12.5px; color: var(--faint); }
.ws-err { padding: 6px 10px; border-radius: 6px; font-size: 14px; background: var(--e-bg); color: var(--e-fg); }
.ws-empty { margin: 4px 0; font-size: 14px; color: var(--faint); }
.ws-dim { color: var(--faint); }
.ws-typing { animation: ws-pulse 1.2s ease-in-out infinite; }
@keyframes ws-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ws-typing { animation: none; } }

/* The token view: the request as tagged text, a block per part, each with its count. */
.ws-next { margin: 6px 0 10px; padding: 8px 10px; border-radius: 6px; font-size: 14px; background: var(--call); }
.ws-view { display: flex; flex-direction: column; gap: 6px; }
.ws-blk { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.ws-blk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 8px; font-size: 12px; color: var(--dim);
  background: var(--side); border-bottom: 1px solid var(--line); }
.ws-count { font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-pre { max-height: 16em; overflow-y: auto; margin: 0; padding: 8px 10px; font: 12.5px/1.5 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-tag { color: var(--faint); }
.ws-b-sys { border-left: 3px solid var(--p-fg); }
.ws-b-tools, .ws-b-result { border-left: 3px solid var(--t-fg); }
.ws-b-user { border-left: 3px solid var(--c-fg); }
.ws-b-it { border-left: 3px solid var(--faint); }
.ws-pending { border-style: dashed; opacity: 0.65; }

/* Tokens sent per request: one bar each, one series, so one color and no legend. */
.ws-bars { position: relative; margin-top: 10px; }
.ws-plot { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding-top: 18px; border-bottom: 1px solid var(--line); }
.ws-col { display: flex; align-items: flex-end; flex: 1 1 0; max-width: 28px; height: 100%; }
.ws-bar { position: relative; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--c-fg); }
.ws-bar.ws-dropped { background: var(--cell); }
.ws-col:hover .ws-bar { opacity: 0.8; }
.ws-bar-n { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: 11px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-axis { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; color: var(--faint); }
.ws-tip { position: absolute; top: 0; z-index: 2; transform: translateY(-100%); padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; pointer-events: none; background: var(--ink); color: var(--bg); }
.ws-tip[hidden] { display: none; }
.ws-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ws-table th { padding: 3px 6px; text-align: left; font-weight: 500; color: var(--dim); border-bottom: 1px solid var(--line); }
.ws-table td { padding: 3px 6px; border-bottom: 1px solid var(--line); }
.ws-table th + th, .ws-table td + td { text-align: right; }
.ws-total { margin-top: 10px; font-size: 14px; line-height: 1.5; }