/* ============================================================================
   zplex preset - the design system, portable.
   ----------------------------------------------------------------------------
   One file, droppable into any host app. It defines the tokens and the
   generic component rules; a host file (see harness-dsh.css) maps its own
   tokens onto these.

   Everything here is measured off claude.ai:
     page #FCFCFB, sidebar #FAF9F9, hairline rgba(11,11,11,.10),
     text #0B0B0B, muted #898781, sidebar 288px.

   The one thing most clones miss: the interface is a sans face and the
   assistant's prose is a SERIF face. That contrast is most of the character.

   Note: this preset never sets a background on a host surface. Backgrounds
   belong to the host; the preset only supplies spacing, type, radius, the
   accent and the component shapes.
   ========================================================================== */

@import url("design-specs/tokens.css");

/* ============================================================================
   Generic component rules.
   These are written against the zx-* hook names so the same file can be used
   by the mock and by any host that adopts the hooks.
   ========================================================================== */

/* --- icon-only controls are circles ------------------------------------- */
.zx-iconbtn {
  display: grid;
  place-items: center;
  width: var(--zx-row-h-sm);
  height: var(--zx-row-h-sm);
  border-radius: 50%;
  color: var(--zx-fg-dim, #898781);
  transition: background var(--zx-dur-1) var(--zx-ease), color var(--zx-dur-1) var(--zx-ease);
}

.zx-iconbtn:hover { background: var(--zx-bg-hover, #F0EFEC); color: var(--zx-fg, #0B0B0B); }

/* --- a quiet raised action, the "New" box ------------------------------ */
.zx-raised {
  display: flex;
  align-items: center;
  gap: var(--zx-s2);
  width: 100%;
  height: var(--zx-row-h);
  padding: 0 var(--zx-s3);
  border-radius: var(--zx-r-md);
  background: var(--zx-bg-raise, #F0EFEC);
  color: var(--zx-fg, #0B0B0B);
  font-size: var(--zx-fs-md);
  font-weight: 500;
  transition: background var(--zx-dur-1) var(--zx-ease);
}

.zx-raised:hover { background: var(--zx-bg-selected, #ECEBE8); }

/* --- nav and chat rows --------------------------------------------------- */
.zx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--zx-row-h);
  padding: 0 var(--zx-s3);
  border-radius: var(--zx-r-md);
  color: var(--zx-fg-mid, #52504C);
  font-size: var(--zx-fs-sm);
  text-align: left;
}

.zx-row:hover { background: var(--zx-bg-hover, #F0EFEC); color: var(--zx-fg, #0B0B0B); }

.zx-row[aria-current="true"] {
  background: var(--zx-bg-selected, #ECEBE8);
  color: var(--zx-fg, #0B0B0B);
}

/* --- a hairline-separated section label ----------------------------------- */
.zx-section {
  padding: var(--zx-s5) var(--zx-s3) var(--zx-s2);
  color: var(--zx-fg-dim, #898781);
  font-size: var(--zx-fs-sm);
  font-weight: 400;
}

/* --- the composer --------------------------------------------------------- */
.zx-composer {
  border-radius: var(--zx-r-xl);
  border: 1px solid var(--zx-line-hard, #D9D8D4);
  background: var(--zx-bg-elev, #FFFFFF);
  box-shadow: var(--zx-sh-1, 0 1px 2px rgba(11, 11, 11, .05));
  padding: 10px var(--zx-s3) 10px var(--zx-s4);
}

.zx-composer:focus-within {
  outline: 2px solid var(--zx-accent);
  outline-offset: 2px;
}

.zx-composer__input {
  display: block;
  width: 100%;
  max-height: 240px;
  padding: 2px 0 6px;
  border: 0;
  background: none;
  resize: none;
  outline: none;
  font-family: var(--zx-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--zx-fg, #0B0B0B);
}

/* --- the send action: the one filled accent object ----------------------- */
.zx-send {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--zx-bg-raise, #F0EFEC);
  color: var(--zx-fg-dim, #898781);
  transition: background var(--zx-dur-1) var(--zx-ease), color var(--zx-dur-1) var(--zx-ease);
}

.zx-send:hover { background: var(--zx-accent); color: var(--zx-accent-ink); }

/* --- prose: serif, generous, with a warm inline-code chip ---------------- */
.zx-prose {
  max-width: var(--zx-prose-max);
  font-family: var(--zx-font-serif);
  font-size: var(--zx-fs-prose);
  line-height: var(--zx-lh-prose);
  color: var(--zx-fg, #0B0B0B);
}

.zx-prose > * + * { margin-top: 18px; }

.zx-prose h1,
.zx-prose h2,
.zx-prose h3 { font-weight: 600; letter-spacing: -.01em; }

.zx-prose h1 { font-size: 20px; }
.zx-prose h2 { font-size: 20px; }
.zx-prose h3 { font-size: 18px; }

.zx-prose code {
  padding: 1px 5px;
  border-radius: var(--zx-r-xs);
  background: var(--zx-code-chip-bg);
  color: var(--zx-code-chip-fg);
  font-size: .86em;
}

.zx-prose a {
  color: var(--zx-accent);
  text-decoration: underline;
  text-decoration-color: var(--zx-accent-line);
  text-underline-offset: 2px;
}

/* --- a tool-call disclosure --------------------------------------------- */
.zx-toolcall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  color: var(--zx-fg-dim, #898781);
  font-size: var(--zx-fs-sm);
  font-weight: 500;
}

.zx-toolcall:hover { color: var(--zx-fg, #0B0B0B); }

/* --- the line under the composer ----------------------------------------- */
.zx-shellfoot {
  display: flex;
  align-items: center;
  gap: var(--zx-s4);
  padding: 10px 6px 0;
  color: var(--zx-fg-dim, #898781);
  font-size: var(--zx-fs-meta);
}

.zx-shellfoot__note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zx-shellfoot__metrics {
  font-family: var(--zx-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--zx-fg-faint, #A9A7A1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}