/* ==========================================================================
   pc-chat — the shared PocketCorp chat component (pc-chat/v1).

   Canonical copy: pocketcorp-ui/lib/pc-chat/v1/ — served at
   https://pocketcorp.agency/lib/pc-chat/v1/. Consumers vendor this whole
   directory at deploy time; edit it only here.

   Token contract: the host page must define the pocketcorp design tokens
   (--pc-surface, --pc-ink, --pc-border*, --pc-ink-inverse, …) and load the
   'JetBrains Mono' font — both pocketcorp-ui's main.css and Coder's theme.css
   do. Everything chat-internal is scoped under .pcc-chat.
   ========================================================================== */


/* Tokens Coder defines in its theme.css that main.css doesn't have. Scoped to
   the chat so they can't leak into other components. */
.pcc-chat {
  --pcc-dim-1: 0.85;
  --pcc-dim-2: 0.6;
  --pcc-dim-3: 0.45;
  --pcc-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pcc-danger: #B00020;
}

.dark .pcc-chat { --pcc-danger: #ff6b81; }

.pcc-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  height: 100%;
  font-family: 'JetBrains Mono', monospace;
  text-transform: none;
  letter-spacing: normal;
}

.pcc-chat-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  /* Backstop: everything legitimately wider than the panel (code blocks,
     tables, tool arguments) scrolls inside its own box, so the transcript
     itself must never scroll sideways or spill over the border. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  scrollbar-width: thin;
}

.pcc-msg { display: flex; flex-direction: column; gap: 7px; max-width: 760px; min-width: 0; }

.pcc-msg-who {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: var(--pcc-dim-3);
}

.pcc-msg-body {
  font-size: 0.76rem;
  line-height: 1.9;
  min-width: 0;
  /* `anywhere`, not `break-word`: only this value lowers the element's
     min-content width — a long path or URL from the agent would otherwise
     widen the whole panel. */
  overflow-wrap: anywhere;
}

/* Code keeps its line structure — it scrolls in place instead of breaking. */
.pcc-msg-body pre,
.pcc-msg-body code {
  overflow-x: auto;
  overflow-wrap: normal;
  max-width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
}

.pcc-msg-body pre {
  border: 1px solid var(--pc-border-muted);
  background: var(--pc-bg-subtle);
  padding: 10px 12px;
}

.pcc-msg-body > :first-child { margin-top: 0; }
.pcc-msg-body > :last-child { margin-bottom: 0; }
.pcc-msg-body p { margin: 0.5em 0; }
.pcc-msg-body ul, .pcc-msg-body ol { margin: 0.5em 0; padding-left: 1.4em; }

/* ---------- rendered markdown ----------
   The agent answers in markdown, so everything GFM can produce needs a rule.
   Headings stay close to body size: these are chat messages, not documents. */

.markdown h1, .markdown h2, .markdown h3,
.markdown h4, .markdown h5, .markdown h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  line-height: 1.4;
  margin: 1.4em 0 0.6em;
}

.markdown h1 { font-size: 1.15rem; }
.markdown h2 { font-size: 1rem; }
.markdown h3 { font-size: 0.88rem; }
.markdown h4, .markdown h5, .markdown h6 {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: var(--pcc-dim-1);
}

.markdown li { margin: 0.15em 0; }
.markdown li > p { margin: 0.2em 0; }
.markdown ul { list-style: square; }
.markdown ol { list-style: decimal; }
.markdown ul ul, .markdown ol ol, .markdown ul ol, .markdown ol ul { margin: 0.1em 0; }

/* Task lists (GFM) — the checkbox sits in the text flow, not the marker slot. */
.markdown li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.2em; }
.markdown input[type="checkbox"] { margin-right: 0.5em; accent-color: currentColor; }

.markdown blockquote {
  margin: 0.7em 0;
  padding: 0.1em 0 0.1em 14px;
  border-left: 2px solid var(--pc-border);
  opacity: var(--pcc-dim-1);
}

.markdown hr {
  margin: 1.2em 0;
  border: 0;
  border-top: 1px solid var(--pc-border-muted);
}

.markdown a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.markdown a:hover { opacity: var(--pcc-dim-1); }

.markdown strong { font-weight: 600; }
.markdown del { opacity: var(--pcc-dim-2); }

/* Inline code, distinct from a fenced block (which .pcc-msg-body pre styles).
   `anywhere` overrides the `normal` that .pcc-msg-body code sets for fenced
   blocks: an inline path or URL has no spaces to break at, so without it a long
   one runs past the edge of the message. */
.markdown :not(pre) > code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--pc-border-muted);
  background: var(--pc-bg-subtle);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tables scroll inside the message rather than widening the panel. */
.markdown table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 0.7rem;
}

.markdown th, .markdown td {
  border: 1px solid var(--pc-border-muted);
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
}

.markdown th {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--pc-bg-subtle);
}

.markdown img { max-width: 100%; height: auto; }

.pcc-msg--user {
  align-self: flex-end;
  align-items: flex-end;
  max-width: min(620px, 88%);
}

.pcc-msg--user .pcc-msg-body {
  border: 1.5px solid var(--pc-border);
  background: var(--pc-bg-subtle);
  padding: 12px 16px;
  white-space: pre-wrap;
  text-align: left;
}

.pcc-msg--thought .pcc-msg-body,
.pcc-chat-thinking {
  font-size: 0.7rem;
  line-height: 1.9;
  opacity: var(--pcc-dim-3);
  font-style: italic;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pcc-msg--error .pcc-msg-body {
  border-left: 1.5px solid var(--pcc-danger);
  padding-left: 14px;
  color: var(--pcc-danger);
  white-space: pre-wrap;
}

/* A tool call and its result collapse into one line until you open it. */
.pcc-tool {
  border: 1px solid var(--pc-border-muted);
  max-width: 760px;
  min-width: 0;
  background: var(--pc-bg-subtle);
}

.pcc-tool-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 9px 13px;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  cursor: pointer;
  text-align: left;
}

.pcc-tool-head:hover { background: var(--pc-bg-hover); }

/* The agents put the whole call in the tool name ("exec: command: python3
   /home/apex/…"), so this must be allowed to shrink and ellipsise. With
   `flex: none` it kept its max-content width and pushed the row past the
   card's border on narrow screens. */
.pcc-tool-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcc-tool-arg {
  opacity: var(--pcc-dim-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.pcc-tool-caret { flex: none; opacity: var(--pcc-dim-3); transition: transform 0.25s var(--pcc-ease); }
.pcc-tool.is-open .pcc-tool-caret { transform: rotate(90deg); }

.pcc-tool-body {
  border-top: 1px solid var(--pc-border-muted);
  padding: 12px 13px;
  font-size: 0.66rem;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  max-height: 380px;
  overflow-y: auto;
  opacity: var(--pcc-dim-1);
}

.pcc-tool-result { margin-top: 10px; opacity: 0.85; }

/* A tool's arguments are highlighted like any other code block, but they sit
   inside the already-bordered tool body, so drop the block's own chrome. */
.pcc-tool-args {
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  font-size: 0.66rem;
  overflow-x: auto;
}

.pcc-tool--error { border-color: var(--pcc-danger); }
.pcc-tool--error .pcc-tool-name { color: var(--pcc-danger); }

/* ==========================================================================
   Syntax highlighting (highlight.js class names)

   The site's palette is monochrome, so this is deliberately restrained: hue
   carries the token category, and saturation stays low enough that a code block
   still reads as part of the page. Colours are scoped to .pcc-chat and set as
   variables so the light and dark sets live in one place.
   ========================================================================== */

.pcc-chat {
  --pcc-hl-keyword: #8250a0;
  --pcc-hl-string: #2c6e4f;
  --pcc-hl-number: #9c5420;
  --pcc-hl-title: #2a5c9c;
  --pcc-hl-comment: #7c7c7c;
  --pcc-hl-meta: #6a6a6a;
  --pcc-hl-attr: #7a5a1e;
  --pcc-hl-deletion: #a03030;
}

.dark .pcc-chat {
  --pcc-hl-keyword: #cb9bf0;
  --pcc-hl-string: #86d2a6;
  --pcc-hl-number: #e0a878;
  --pcc-hl-title: #8ab8f0;
  --pcc-hl-comment: #8b8b8b;
  --pcc-hl-meta: #9a9a9a;
  --pcc-hl-attr: #ddc07a;
  --pcc-hl-deletion: #f08a8a;
}

.pcc-chat .hljs-comment,
.pcc-chat .hljs-quote { color: var(--pcc-hl-comment); font-style: italic; }

.pcc-chat .hljs-keyword,
.pcc-chat .hljs-selector-tag,
.pcc-chat .hljs-literal,
.pcc-chat .hljs-type,
.pcc-chat .hljs-doctag { color: var(--pcc-hl-keyword); }

.pcc-chat .hljs-string,
.pcc-chat .hljs-regexp,
.pcc-chat .hljs-addition,
.pcc-chat .hljs-selector-attr,
.pcc-chat .hljs-selector-pseudo { color: var(--pcc-hl-string); }

.pcc-chat .hljs-number,
.pcc-chat .hljs-symbol,
.pcc-chat .hljs-bullet,
.pcc-chat .hljs-link,
.pcc-chat .hljs-variable,
.pcc-chat .hljs-template-variable { color: var(--pcc-hl-number); }

.pcc-chat .hljs-title,
.pcc-chat .hljs-title.class_,
.pcc-chat .hljs-title.function_,
.pcc-chat .hljs-section,
.pcc-chat .hljs-name,
.pcc-chat .hljs-selector-id,
.pcc-chat .hljs-selector-class { color: var(--pcc-hl-title); }

.pcc-chat .hljs-attr,
.pcc-chat .hljs-attribute,
.pcc-chat .hljs-property,
.pcc-chat .hljs-params { color: var(--pcc-hl-attr); }

.pcc-chat .hljs-meta,
.pcc-chat .hljs-built_in,
.pcc-chat .hljs-class .hljs-title { color: var(--pcc-hl-meta); }

.pcc-chat .hljs-deletion { color: var(--pcc-hl-deletion); }
.pcc-chat .hljs-emphasis { font-style: italic; }
.pcc-chat .hljs-strong { font-weight: 600; }

/* ---------- live area + status ---------- */

.pcc-chat-live { max-width: 760px; min-width: 0; }
.pcc-chat-live:empty { display: none; }

.pcc-chat-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: var(--pcc-dim-2);
  padding: 0 0 10px;
}

.pcc-chat-status[hidden] { display: none; }

.pcc-spinner {
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pcc-spin 0.9s linear infinite;
  flex: none;
}

@keyframes pcc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pcc-spinner { animation-duration: 3s; }
}

/* ---------- composer ---------- */

.pcc-chat-foot {
  flex: none;
  min-width: 0;
  padding: 14px 20px 18px;
  background: var(--pc-surface);
  border-top: 1px solid var(--pc-border-muted);
}

.pcc-composer {
  border: 1.5px solid var(--pc-border);
  transition: border-color 0.3s var(--pcc-ease);
  background: var(--pc-bg-subtle);
}

.pcc-composer:focus-within { border-color: var(--pc-border-strong); }

.pcc-composer-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.8;
  padding: 14px 16px 4px;
  resize: none;
  outline: none;
  min-height: 64px;
  max-height: 40vh;
  overflow-y: auto;
}

.pcc-composer-input::placeholder { color: inherit; opacity: 0.35; }

.pcc-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px 10px 16px;
}

.pcc-composer-hint {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: var(--pcc-dim-3);
}

.pcc-composer-actions { display: flex; gap: 8px; align-items: center; }

/* The component's own button base (a copy of the site's .pc-btn), so a host
   page needs nothing beyond the design tokens. */
.pcc-btn {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 40px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease-out;
  text-decoration: none;
}

.pcc-btn:hover:not(:disabled) {
  background: var(--pc-ink);
  color: var(--pc-surface);
}

.pcc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pcc-stop { color: var(--pcc-danger); border-color: var(--pcc-danger); }

/* ---------- chat settings: agent switcher + working directory ---------- */

.pcc-agent-select {
  border: 1px solid var(--pc-border);
  background: var(--pc-surface);
  color: inherit;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 6px;
  cursor: pointer;
  outline: none;
}

.pcc-agent-select:focus { border-color: var(--pc-border-strong); }
.pcc-agent-select:disabled { opacity: 0.35; cursor: default; }

/* ---------- notices (agent switched, workdir changed) ---------- */

.pcc-msg--notice .pcc-msg-body {
  font-size: 0.66rem;
  font-style: italic;
  opacity: var(--pcc-dim-2);
}

/* ---------- slash-command autocomplete ---------- */

/* Anchor for the slash menu, which sits on top of the composer's border. */
.pcc-composer { position: relative; }

.pcc-slash-menu {
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  bottom: calc(100% + 4px);
  z-index: 6;
  border: 1.5px solid var(--pc-border);
  background: var(--pc-surface);
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pcc-slash-menu[hidden] { display: none; }

.pcc-slash-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-align: left;
  cursor: pointer;
}

.pcc-slash-item:hover,
.pcc-slash-item.is-active { background: var(--pc-bg-hover); }

.pcc-slash-name { flex: none; }

.pcc-slash-desc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.62rem;
  opacity: var(--pcc-dim-2);
}

/* ==========================================================================
   Files — download links in the transcript, attachments in the composer
   ========================================================================== */

/* A path the agent mentioned. Underlined rather than coloured: the palette is
   monochrome, and a whole paragraph of paths should not turn into confetti. */
.pcc-file-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pcc-file-link:hover { text-decoration-style: solid; background: var(--pc-bg-hover); }

/* Set while a download is in flight, on whatever element started it. */
.pcc-file-link.is-busy,
.pcc-icon-btn.is-busy { opacity: var(--pcc-dim-2); cursor: progress; }

.pcc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: var(--pcc-dim-2);
  transition: opacity 0.2s var(--pcc-ease), border-color 0.2s var(--pcc-ease);
}

.pcc-icon-btn:hover:not(:disabled) { opacity: 1; border-color: var(--pc-border); }
.pcc-icon-btn.is-active { opacity: 1; border-color: var(--pc-border); }
.pcc-icon-btn:disabled { opacity: 0.25; cursor: default; }

/* The real file input is driven by the attach button. */
.pcc-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- queued attachments ---------- */

.pcc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 0 16px;
}

.pcc-chips[hidden] { display: none; }

.pcc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 4px 4px 8px;
  border: 1px solid var(--pc-border);
  background: var(--pc-surface);
  font-size: 0.62rem;
}

.pcc-chip > svg { flex: none; opacity: var(--pcc-dim-2); }

.pcc-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.pcc-chip-size { opacity: var(--pcc-dim-3); flex: none; }

.pcc-chip-x {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: var(--pcc-dim-2);
}

.pcc-chip-x:hover { opacity: 1; color: var(--pcc-danger); }