/* ================================================================
   portal.css  ·  jcd::ai web portal — complete design system
   ----------------------------------------------------------------
   Design tokens + every component used in the portal chrome:
   layout, brand, buttons, conversation list, metrics bar, cards,
   tables, composer, tags, and the settings controls.

   Markup convention: prefix every class with `jp-` (jcd portal).
   Theme: dark by default; add  data-theme="light"  on .jp-app.

   For the styling of MODEL REPLIES (chat answers / Markdown), use
   the companion package output-kit/jcd-output.css.
   ================================================================ */

:root {
  /* ---- surfaces ---- */
  --jp-bg:        #0d0d0e;   /* app canvas            */
  --jp-sidebar:   #131315;   /* left rail             */
  --jp-rail:      #101012;   /* metrics strip         */
  --jp-surface:   #131316;   /* cards / panels        */
  --jp-surface-2: #161619;   /* inset tiles / inputs  */
  --jp-code:      #0f0f11;   /* code blocks           */

  /* ---- lines ---- */
  --jp-border:      #232327; /* card / divider        */
  --jp-border-soft: #1f1f23; /* chrome separators     */
  --jp-border-hair: #1a1a1d;
  --jp-control:     var(--jp-control); /* list rows             */

  /* ---- text ---- */
  --jp-heading: #f0efed;
  --jp-text:    #e6e6e4;
  --jp-dim:     #a0a09e;
  --jp-mute:    #6c6c6a;

  /* ---- brand + accent ---- */
  --jp-accent:      #993333;  /* primary — buttons, active, markers */
  --jp-accent-fg:   #e0a0a0;  /* accent text on dark                */
  --jp-accent-tint: rgba(153, 51, 51, 0.16);
  --jp-connected:   #22c55e;  /* live WebSocket indicator (the ::)  */

  /* ---- status ---- */
  --jp-ok:   #22c55e;
  --jp-warn: #d8a23a;
  --jp-err:  #d96a6a;
  --jp-charge: #6bbf8a;

  /* ---- type ---- */
  --jp-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --jp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --jp-fs:   14px;

  /* ---- space (4px base) ---- */
  --jp-1: 4px;  --jp-2: 8px;  --jp-3: 12px; --jp-4: 16px;
  --jp-5: 20px; --jp-6: 24px; --jp-7: 28px; --jp-8: 32px;

  /* ---- radius ---- */
  --jp-r-sm: 6px; --jp-r:    8px;  --jp-r-md: 10px;
  --jp-r-lg: 12px; --jp-r-xl: 14px;

  /* ---- chrome heights ---- */
  --jp-head-h: 56px;
  --jp-rail-w: 288px;

  --jp-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.jp-app[data-theme="light"] {
  --jp-bg:#fbfbfa; --jp-sidebar:#f4f4f2; --jp-rail:#f6f6f4;
  --jp-surface:#ffffff; --jp-surface-2:#f5f5f4; --jp-code:#f6f6f5;
  --jp-border:#e6e6e3; --jp-border-soft:#ececea; --jp-border-hair:#efefed; --jp-control:#d4d3cf;
  --jp-heading:#16140f; --jp-text:#1c1c1a; --jp-dim:#57564f; --jp-mute:#8a8a85;
  --jp-accent-fg:#8a2f2f; --jp-accent-tint:rgba(153,51,51,0.10);
}

/* ================================================================
   LAYOUT
   ================================================================ */
.jp-app {
  position: fixed; inset: 0; display: flex;
  background: var(--jp-bg); color: var(--jp-text);
  font-family: var(--jp-sans); font-size: var(--jp-fs);
  -webkit-font-smoothing: antialiased;
}
.jp-sidebar {
  width: var(--jp-rail-w); min-width: var(--jp-rail-w);
  height: 100%; display: flex; flex-direction: column;
  background: var(--jp-sidebar); border-right: 1px solid var(--jp-border);
}
.jp-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--jp-bg); position: relative; }
.jp-head {
  height: var(--jp-head-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--jp-7); border-bottom: 1px solid var(--jp-border-soft);
}
.jp-scroll { flex: 1; overflow-y: auto; }

/* ================================================================
   BRAND  ·  the :: is a live connection indicator
   ================================================================ */
.jp-brand {
  font-family: var(--jp-mono); font-weight: 600; font-size: 17px;
  letter-spacing: -0.4px; color: var(--jp-heading); user-select: none;
}
.jp-brand .jp-sep { color: var(--jp-mute); margin-left: 0.02em; transition: color 0.2s; }
.jp-brand .jp-sep .c1 { letter-spacing: -0.22em; }       /* squeeze :: into a tight square */
.jp-brand.is-connected .jp-sep { color: var(--jp-connected); }
.jp-brand .jp-ai { color: var(--jp-mute); }

/* ================================================================
   BUTTONS
   ================================================================ */
.jp-btn {
  font-family: var(--jp-sans); font-size: 13px; font-weight: 500;
  border-radius: var(--jp-r); padding: 7px 13px; cursor: pointer;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.jp-btn--primary { background: var(--jp-accent); color: #fff; }
.jp-btn--primary:hover { background: color-mix(in srgb, var(--jp-accent) 86%, white); }
.jp-btn--ghost { background: transparent; border-color: var(--jp-border); color: var(--jp-dim); }
.jp-btn--ghost:hover { border-color: var(--jp-control); color: var(--jp-text); }
/* Circular send button floating inside the input field's right edge (TRDGW
   pattern) — .jp-inputrow (the textarea's own row) is the positioning context,
   so the button centers against the typing area and never sits over the
   bottom tools line. The textarea reserves the space with its right padding. */
.jp-btn--send {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: var(--jp-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.jp-btn--send:hover { background: color-mix(in srgb, var(--jp-accent) 86%, white); }
.jp-icon-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--jp-border); border-radius: var(--jp-r);
  color: var(--jp-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.jp-icon-btn:hover { border-color: var(--jp-control); color: var(--jp-text); }
.jp-icon-btn.is-active { border-color: var(--jp-accent); background: var(--jp-accent-tint); color: var(--jp-accent-fg); }

/* ================================================================
   CONVERSATION LIST
   ================================================================ */
.jp-list { flex: 1; overflow-y: auto; padding: var(--jp-2); }
.jp-conv {
  display: flex; align-items: center; gap: var(--jp-2); width: 100%; text-align: left;
  background: transparent; border: none; border-radius: var(--jp-r);
  padding: 10px; cursor: pointer; color: var(--jp-dim); font-family: inherit;
}
.jp-conv:hover { background: color-mix(in srgb, var(--jp-text) 6%, transparent); }
.jp-conv.is-active {
  background: color-mix(in srgb, var(--jp-accent) 16%, transparent);
  color: var(--jp-heading); box-shadow: inset 2px 0 0 var(--jp-accent);
}
.jp-conv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jp-conv__title { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-conv__time { font-size: 12px; color: var(--jp-mute); margin-top: 3px; }
.jp-conv__count { font-family: var(--jp-mono); font-size: 11px; color: var(--jp-mute); background: color-mix(in srgb, var(--jp-text) 5%, transparent); border-radius: var(--jp-r-sm); padding: 1px 7px; }

/* ================================================================
   METRICS STRIP
   ================================================================ */
.jp-metrics {
  display: flex; align-items: stretch; gap: var(--jp-7);
  padding: 13px var(--jp-7); background: var(--jp-rail);
  border-bottom: 1px solid var(--jp-border-soft); overflow-x: auto; flex-shrink: 0;
}
.jp-metric { display: flex; flex-direction: column; gap: var(--jp-1); }
.jp-metric__k { font-family: var(--jp-mono); font-size: 10px; letter-spacing: 0.09em; color: var(--jp-mute); }
.jp-metric__v { font-family: var(--jp-mono); font-size: 13px; color: var(--jp-text); white-space: nowrap; }

/* ================================================================
   CARDS
   ================================================================ */
.jp-card { background: var(--jp-surface); border: 1px solid var(--jp-border); border-radius: var(--jp-r-xl); padding: 18px 20px; }
.jp-card__head { display: flex; align-items: center; gap: var(--jp-3); margin-bottom: var(--jp-4); }
.jp-card__bar { width: 3px; height: 15px; background: var(--jp-accent); border-radius: 2px; }
.jp-card__title { font-size: 14.5px; font-weight: 600; color: var(--jp-heading); }
.jp-card__meta { margin-left: auto; font-family: var(--jp-mono); font-size: 11px; color: var(--jp-mute); }

.jp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--jp-3); }
.jp-kpi { background: var(--jp-surface-2); border: 1px solid var(--jp-border); border-radius: var(--jp-r-lg); padding: 15px 16px; }
.jp-kpi__v { font-family: var(--jp-mono); font-size: 21px; font-weight: 600; letter-spacing: -0.5px; color: var(--jp-heading); }
.jp-kpi__v u { text-decoration: none; font-size: 13px; color: #8a8a88; }
.jp-kpi__k { font-size: 12.5px; color: var(--jp-dim); margin-top: 6px; }

/* ================================================================
   TABLE
   ================================================================ */
.jp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jp-table thead th { text-align: left; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--jp-mute); padding: 8px 12px; border-bottom: 1px solid var(--jp-border); }
.jp-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--jp-border-hair); color: var(--jp-text); }
.jp-table tbody tr:last-child td { border-bottom: none; }
.jp-table .num { text-align: right; font-family: var(--jp-mono); white-space: nowrap; }

/* ================================================================
   COMPOSER
   ================================================================ */
.jp-composer { display: flex; padding: 14px var(--jp-7); border-top: 1px solid var(--jp-border-soft); background: var(--jp-bg); flex-shrink: 0; }
/* The bordered field: textarea on top, a reserved button line at the bottom
   (paperclip first), and the circular send button floating on the right edge. */
/* same column as the chat text: #messages is max 820px incl. 28px side
   padding, so the text spans 764px — the input field lines up with it */
.jp-iwrap { flex: 1; max-width: calc(820px - 2 * 28px); margin: 0 auto; background: var(--jp-surface-2); border: 1px solid var(--jp-border); border-radius: var(--jp-r-lg); }
.jp-iwrap:focus-within { border-color: color-mix(in srgb, var(--jp-accent) 55%, var(--jp-border)); }
.jp-inputrow { position: relative; }
.jp-tools { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; }
.jp-attach { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; color: var(--jp-mute); cursor: pointer; flex-shrink: 0; }
.jp-attach:hover { color: var(--jp-text); background: var(--jp-accent-tint); }
.jp-textarea { display: block; box-sizing: border-box; width: 100%; max-height: 160px; resize: none; background: transparent; border: none; padding: 12px 56px 10px 14px; color: var(--jp-text); font-family: inherit; font-size: 14px; line-height: 1.4; outline: none; }
.jp-textarea::placeholder { color: #5a5a58; }

/* ================================================================
   TAGS / BADGES
   ================================================================ */
.jp-tag { display: inline-block; font-family: var(--jp-mono); font-size: 11px; line-height: 1.5; padding: 2px 8px; border-radius: var(--jp-r-sm); background: var(--jp-accent-tint); color: var(--jp-accent-fg); }
.jp-tag--ok   { background: rgba(34, 197, 94, 0.15);  color: #7fdca0; }
.jp-tag--warn { background: rgba(216, 162, 58, 0.15); color: #e0c07a; }
.jp-tag--err  { background: rgba(217, 106, 106, 0.15); color: #e89a9a; }

/* ================================================================
   SETTINGS CONTROLS
   ================================================================ */
.jp-panel { position: absolute; top: 52px; right: 18px; width: 286px; max-height: calc(100% - 80px); overflow-y: auto; background: var(--jp-surface-2); border: 1px solid var(--jp-border); border-radius: var(--jp-r-xl); box-shadow: var(--jp-shadow); padding: 8px 14px 16px; z-index: 50; }
.jp-panel__label { font-family: var(--jp-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--jp-mute); margin: 14px 4px 6px; }

.jp-opt { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; padding: 7px 4px; cursor: pointer; color: var(--jp-text); font-family: inherit; font-size: 13.5px; text-align: left; }
.jp-opt:hover { color: var(--jp-heading); }
.jp-check { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--jp-control); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.jp-opt.is-on .jp-check { border-color: var(--jp-accent); background: var(--jp-accent); }
.jp-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--jp-control); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.jp-opt.is-on .jp-radio { border-color: var(--jp-accent); }
.jp-opt.is-on .jp-radio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jp-accent); }

.jp-seg { display: flex; gap: 6px; }
.jp-seg button { flex: 1; padding: 7px 0; font-size: 12.5px; font-family: inherit; cursor: pointer; border-radius: var(--jp-r); border: 1px solid var(--jp-control); background: transparent; color: var(--jp-dim); font-weight: 500; transition: all 0.12s; }
.jp-seg button:hover { border-color: var(--jp-control); }
.jp-seg button.is-on { border-color: var(--jp-accent); background: color-mix(in srgb, var(--jp-accent) 22%, transparent); color: var(--jp-accent-fg); font-weight: 600; }

.jp-select { width: 100%; background: var(--jp-code); color: var(--jp-text); border: 1px solid var(--jp-control); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 13px; cursor: pointer; }

/* ================================================================
   CONVERSATION TRANSCRIPT
   ----------------------------------------------------------------
   A turn streams as: user bubble → reasoning disclosures →
   tool-call disclosures → the final answer (jcd-output, see
   output-kit/). Toggle open/closed with the `is-open` class.
   ================================================================ */
.jp-thread { display: flex; flex-direction: column; gap: 22px; }
.jp-turn   { display: flex; flex-direction: column; gap: 16px; }

/* user message */
.jp-msg-user {
  align-self: flex-end; max-width: 74%;
  background: #232a36; border: 1px solid #2c3543; color: #e8ecf2;
  border-radius: 14px; padding: 13px 17px; font-size: 14.5px; line-height: 1.55;
}

/* shared disclosure caret — pinned to the mono font so the ▶ glyph renders
   identically in every row regardless of the row's own font */
.jp-caret { display: inline-block; font-family: var(--jp-mono); font-size: 10px; color: var(--jp-mute); transition: transform 0.15s; }
.is-open > .jp-caret { transform: rotate(90deg); }

/* reasoning */
.jp-reason__toggle {
  display: inline-flex; align-items: center; gap: 9px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--jp-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--jp-mute);
}
.jp-reason__toggle:hover { color: var(--jp-dim); }
/* the gap sits AFTER the body (before the next row), not between the
   REASONING label and its text */
.jp-reason__body { display: none; flex-direction: column; gap: 14px; padding-left: 28px; margin-top: 0; margin-bottom: 6px; }
.jp-reason.is-open .jp-reason__body { display: flex; }
.jp-reason__body p { margin: 0; color: var(--jp-dim); font-size: 12px; line-height: 1.6; }
.jp-reason__body code { font-family: var(--jp-mono); font-size: 12.5px; background: var(--jp-surface-2); border: 1px solid var(--jp-border); border-radius: 4px; padding: 1px 5px; color: var(--jp-text); }

/* tool call — muted grey row, one text line high */
.jp-tool__toggle {
  display: inline-flex; align-items: center; gap: 9px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--jp-sans); font-size: 12px; letter-spacing: 0.08em; color: var(--jp-mute);
}
.jp-tool__toggle .jp-tool__badge { font-size: 11px; color: var(--jp-mute); }
/* ---- per-turn steps group: the "N steps" chevron ---- */
/* hidden entirely unless tools or reasoning are shown (the toggles gate it) */
.jp-steps { display: none; }
.messages.show-tools .jp-steps,
.messages.show-reasoning .jp-steps { display: block; }
/* while its turn is still running only the live box shows progress —
   the group appears (collapsed) when the turn ends */
.messages .jp-steps.is-live { display: none; }
.jp-steps__toggle {
  display: inline-flex; align-items: center; gap: 9px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--jp-sans); font-size: 12px; letter-spacing: 0.08em; color: var(--jp-mute);
}
.jp-steps.is-open > .jp-steps__toggle .jp-caret { transform: rotate(90deg); }
/* expanded: the rows exactly as before, tight block, one tab in */
.jp-steps__body { display: none; padding-left: 20px; margin-top: 6px; }
.jp-steps.is-open > .jp-steps__body { display: flex; flex-direction: column; gap: 0; }

/* ---- live activity (running turn): spinner outside-left, step box right ---- */
.jp-live { display: flex; align-items: flex-start; gap: 10px; }
.jp-live .jcd-loader { flex-shrink: 0; margin-top: 4px; }
/* the big ring shows ONLY when steps are hidden — in box mode each running
   line carries its own mini spinner instead */
.messages.show-tools .jp-live .jcd-loader { display: none; }
/* mini spinner: the in-flight mark at the end of a step line */
.jcd-mini {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--jp-accent-tint); border-top-color: var(--jp-accent);
  /* sit slightly below the baseline so the ball centers on the lowercase
     x-height (10px is smaller than the line's 19.8px box, so no height gain) */
  margin-left: 6px; vertical-align: -3px; animation: jcd-rot .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .jcd-mini { animation: none; } }
/* finished-step check mark: green done, red error */
.jp-stepcheck { margin-left: 7px; vertical-align: -1px; }
.jp-stepcheck.ok  { color: #7fdca0; }
.jp-stepcheck.err { color: #e89a9a; }
.jp-stepbox {
  flex: 1; min-width: 0; border: 1px solid var(--jp-border); border-radius: 8px;
  padding: 6px 12px; background: rgba(255, 255, 255, 0.015);
}
.jp-stepbox:empty { display: none; }
.jp-stepbox > div {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--jp-sans); font-size: 12px; letter-spacing: 0.08em;
  color: var(--jp-mute); line-height: 1.65; animation: jp-line-in .25s ease;
  max-height: 2em; transition: max-height .25s ease, opacity .25s ease;
}
/* new line slides open inside the box (no jump — the box top never moves) */
@keyframes jp-line-in { from { max-height: 0; opacity: 0; } to { max-height: 2em; opacity: 1; } }
/* rotating out: the oldest line collapses + fades so the rest glide up */
.jp-stepbox > div.out { max-height: 0; opacity: 0; }
/* the status badge as plain text — no pill, so it never exceeds the text row.
   running = grey; done/error keep their green/red text */
.jp-tool__badge .jp-tag,
.jp-stepbox .jp-tag { background: none; padding: 0; border-radius: 0; line-height: inherit; color: var(--jp-mute); }
.jp-tool__badge .jp-tag--ok,
.jp-stepbox .jp-tag--ok  { color: #7fdca0; }
.jp-tool__badge .jp-tag--err,
.jp-stepbox .jp-tag--err { color: #e89a9a; }
.jp-tool__detail { display: none; flex-direction: column; gap: 10px; padding-left: 28px; margin-top: 10px; }
.jp-tool.is-open .jp-tool__detail { display: flex; }
.jp-tool__call { font-family: var(--jp-mono); font-size: 12.5px; color: var(--jp-mute); line-height: 1.6; word-break: break-all; }
.jp-tool__result {
  margin: 0; font-family: var(--jp-mono); font-size: 12px; color: var(--jp-dim);
  background: var(--jp-code); border: 1px solid var(--jp-border); border-radius: var(--jp-r-md);
  padding: 14px 16px; white-space: pre-wrap; overflow-x: auto; line-height: 1.6;
}