/**
 * Dev00 Chat — Page Specific Styles
 *
 * Only styles unique to the Dev00 Chat template (page-chat.php) live here.
 * Everything reusable was moved out:
 * - the SVG diagram palette (.d-*), the WP `figure` margin fix and the range
 *   input skin now live in assets/css/dev00-globals.css, since other templates
 *   use the same vocabulary;
 * - spacing utilities are generated by the global Tailwind build instead of
 *   being hand-patched here.
 *
 * What remains is prefixed .chat-* and is meaningless outside this page.
 *
 * All colors and fonts strictly reference Dev00 theme tokens.
 *
 * @package Dev00
 */

/* 1. Hero Headline sizing (proportional for page-chat hero copy) */
.chat-hero-title {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem) !important;
  line-height: 1.04 !important;
  max-width: 22ch !important;
}

/* 2. Responsive 5-column grid (Tailwind build in dev00.css only includes cols-1..4) */
@media (min-width: 768px) {
  .chat-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Bento grid full span helper */
@media (min-width: 640px) {
  .chat-col-span-full {
    grid-column: 1 / -1 !important;
  }
}

/* ROI Calculator Layout & Components */
.chat-roi-grid {
  display: grid;
  gap: 1.5rem;
}
/*
 * A grid item defaults to `min-width: auto`, so the 1fr track refuses to shrink
 * below the panel's min-content width. The panels contain number inputs plus
 * nowrap unit badges, which pins that min-content at ~367px — wider than the
 * shell on phones — so below ~414px the panels overflowed and body's
 * `overflow-x: hidden` silently clipped their right edge.
 */
.chat-roi-grid > * {
  min-width: 0;
}
@media (min-width: 1024px) {
  .chat-roi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
  }
}

/* Tactile Input Groups with Attached Unit Badges */
.chat-input-group {
  display: flex;
  align-items: stretch;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-input-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.chat-input-field {
  flex: 1;
  min-width: 0;
  /* A number input keeps its intrinsic width (~214px) even with flex:1;
     width:0 lets the flex basis fully govern so it can shrink on phones. */
  width: 0;
  background: transparent;
  border: none;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg);
  outline: none;
}
.chat-input-unit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  background: var(--surface-2);
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
}

/* Hide number input spinners */
.chat-input-field::-webkit-outer-spin-button,
.chat-input-field::-webkit-inner-spin-button,
.chat-roi-grid input[type="number"]::-webkit-outer-spin-button,
.chat-roi-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.chat-input-field,
.chat-roi-grid input[type="number"] {
  -moz-appearance: textfield;
}

/* Hero Savings Card in ROI */
.chat-roi-hero-card {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 16%, transparent) 0%, color-mix(in oklab, var(--accent) 4%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--accent) 25%, transparent);
}

/* Metric Sub-Tiles */
.chat-roi-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.chat-roi-tile:hover {
  border-color: var(--line-strong);
}