/* =============================================================================
   The workbench — lifted out of site.css
   -----------------------------------------------------------------------------
   It belongs to the assistant, not to the portfolio, and site.css was making
   every marketing page download rules for a panel it never renders. The tokens
   it uses (--ink, --line, --accent…) are defined by whichever stylesheet loads
   first, so this file deliberately declares none of its own.
   ========================================================================== */
/* =============================================================================
   The workbench — an overlay, not a third column
   -----------------------------------------------------------------------------
   A preview wants width: a rendered page, a chart, a file tree beside a code
   pane. On a laptop there is not room for rail, conversation and pane at once,
   so the panel slides OVER the conversation. It is wide when open, costs
   nothing when shut, and the chat is exactly where it was when you close it.

   transform, not width or display: the browser animates a transform on the
   compositor, so the slide stays smooth while the panel is rendering an iframe
   or a few hundred rows of CSV.
   ========================================================================== */
.wb { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
      width: min(980px, 100%); display: flex; flex-direction: column;
      background: var(--ink); border-left: 1px solid var(--line);
      transform: translateX(101%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
      box-shadow: -30px 0 70px rgba(0,0,0,.45); }
.wb.is-open { transform: none; }
.wb__scrim { position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.5);
             backdrop-filter: blur(2px); }

.wb__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
           border-bottom: 1px solid var(--line); background: var(--ink-1); flex: 0 0 auto; }
.wb__title { font-size: .9rem; }
.wb__crumb { font-size: .8rem; color: var(--muted); flex: 1;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wb__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 248px minmax(0,1fr); }
.wb__tree { border-right: 1px solid var(--line-soft); overflow-y: auto;
            padding: 10px 8px; background: var(--ink-1); }
.wb__view { overflow: auto; padding: 18px; display: flex; }
.wb__view > * { flex: 1; min-width: 0; }

.wb-group { margin-bottom: 14px; }
.wb-group__head { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
                  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
                  color: var(--dim); }
.wb-run { margin-left: auto; border: 1px solid var(--accent); background: none;
          color: var(--accent); border-radius: 999px; padding: 1px 9px;
          font: inherit; font-size: .68rem; cursor: pointer; letter-spacing: .04em; }
.wb-run:hover { background: var(--accent); color: var(--on-accent); }

.wb-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
          background: none; border: 0; color: var(--muted); font: inherit; font-size: .82rem;
          padding: 7px 9px; border-radius: var(--r-1); cursor: pointer; }
.wb-row:hover { background: var(--ink-2); color: var(--text); }
.wb-row.is-on { background: var(--ink-2); color: var(--text);
                box-shadow: inset 2px 0 0 var(--accent); }
.wb-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-row__size { margin-left: auto; color: var(--dim); font-size: .7rem; flex: 0 0 auto; }
.wb-ico { flex: 0 0 auto; font-size: .58rem; letter-spacing: .04em; color: var(--dim);
          border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; min-width: 30px;
          text-align: center; }
.wb-empty { color: var(--dim); font-size: .84rem; padding: 10px; margin: 0; }

/* --- the panes ------------------------------------------------------------ */
.wb-frame { width: 100%; height: 100%; min-height: 460px; border: 1px solid var(--line);
            border-radius: var(--r-1); background: #fff; }
.wb-media { max-width: 100%; max-height: 78vh; border-radius: var(--r-1);
            border: 1px solid var(--line); align-self: start; margin: 0 auto; display: block; }
.wb-audio { width: 100%; align-self: center; }
.wb-code { width: 100%; }
.wb-code pre { margin: 0; padding: 14px 16px; background: var(--ink-1);
               border: 1px solid var(--line); border-radius: var(--r-1);
               overflow: auto; max-height: 78vh; }
.wb-code code { font: 12.5px/1.65 var(--mono); color: var(--text); white-space: pre; }
.wb-doc { max-width: 74ch; margin: 0 auto; font-size: .95rem; line-height: 1.7; }
.wb-doc h1, .wb-doc h2, .wb-doc h3 { line-height: 1.25; margin: 1.4em 0 .5em; }
.wb-doc h1:first-child { margin-top: 0; }
.wb-doc code { background: var(--ink-1); border: 1px solid var(--line-soft);
               border-radius: 4px; padding: 1px 5px; font: 12.5px var(--mono); }
.wb-doc pre { background: var(--ink-1); border: 1px solid var(--line);
              border-radius: var(--r-1); padding: 13px 15px; overflow-x: auto; }
.wb-doc pre code { border: 0; background: none; padding: 0; }
.wb-doc blockquote { border-left: 2px solid var(--accent); margin: 1em 0;
                     padding-left: 14px; color: var(--muted); }

.wb-table { width: 100%; overflow: auto; max-height: 78vh; }
.wb-table table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.wb-table th, .wb-table td { border: 1px solid var(--line); padding: 7px 10px;
                             text-align: left; white-space: nowrap; }
.wb-table th { background: var(--ink-1); position: sticky; top: 0;
               color: var(--text); font-weight: 600; }
.wb-table td { color: var(--muted); }

.wb-chartwrap { align-self: start; width: 100%; }
.wb-chart { width: 100%; height: auto; }
.wb-key { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap;
          gap: 8px 18px; font-size: .8rem; color: var(--muted); }
.wb-key li { display: flex; align-items: center; gap: 7px; }
.wb-key i { width: 11px; height: 11px; border-radius: 3px; display: block; }

.wb-error { white-space: pre-wrap; font: 12.5px/1.6 var(--mono); color: #e0684a;
            background: var(--ink-1); border: 1px solid var(--line);
            border-radius: var(--r-1); padding: 14px 16px; align-self: start; width: 100%; }

/* --- a task that is waiting for you --------------------------------------- */
.needs { border: 1px solid var(--accent); border-radius: var(--r-3); padding: 14px 16px;
         margin-top: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--ink-2)); }
.needs h4 { margin: 0 0 6px; font-size: .92rem; }
.needs p { margin: 0 0 10px; font-size: .85rem; color: var(--muted); }
.needs__row { display: flex; gap: 8px; flex-wrap: wrap; }
.needs__field { display: grid; gap: 4px; margin-bottom: 8px; font-size: .8rem; }
.needs__field input { background: var(--ink); border: 1px solid var(--line);
                      border-radius: var(--r-1); padding: 8px 10px; color: var(--text);
                      font: inherit; }
.needs__secret { font-size: .78rem; color: var(--muted); background: var(--ink);
                 border: 1px dashed var(--line); border-radius: var(--r-1);
                 padding: 9px 11px; font-family: var(--mono); white-space: pre-wrap; }

/* --- the rail, now collapsible on a desktop too --------------------------- */
.head-actions { display: flex; gap: 8px; margin: 8px 0 0; }
.rail__hide { background: none; border: 0; color: var(--dim); cursor: pointer;
              font-size: 1.1rem; line-height: 1; padding: 0 4px; }
.rail__hide:hover { color: var(--text); }
body.rail-hidden main.chat-app { grid-template-columns: minmax(0, 1fr); }
body.rail-hidden .rail { display: none; }
body.rail-hidden .rail-toggle { display: block; margin: 10px 0 0 clamp(16px, 3vw, 34px); }
.rail__dot--waiting { background: #e8b04b; animation: think 1.4s infinite ease-in-out; }

@media (max-width: 900px) {
  .wb__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .wb__tree { border-right: 0; border-bottom: 1px solid var(--line-soft);
              max-height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
  .wb { transition: none; }
  .rail__dot--waiting { animation: none; }
}