/* ═══════════════════════════════════════════════════════════════════════
   TITAN — full-page kit interview
   Ported verbatim from figma/diykit-design-titan/app/Views/site/titan-chat.php.
   That file names its tokens after the figma theme; the alias block below maps
   them onto the /dk design system so the CSS itself needs no edits.
   ═══════════════════════════════════════════════════════════════════════ */
.dk-titan-wrap {
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --foreground: var(--fg);
  --muted-foreground: var(--fg3);
  --secondary-foreground: var(--fg2, var(--fg));
  --card: var(--bg2);
  --background: var(--bg);
  --primary-foreground: var(--primary-fg);
}

/* ── Titan Chat Page ──────────────────────────────────────────────── */
.dk-titan-wrap {
  display: flex;
  height: calc(100vh - 64px);
  overflow: hidden;
  background: var(--background);
}

/* ── Chat pane ── */
.dk-chat-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dk-chat-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}

.dk-titan-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--primary-foreground);
  flex-shrink: 0;
}
.dk-titan-avatar .dk-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid var(--card);
}

.dk-chat-header-info { flex: 1 }
.dk-chat-header-info .dk-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .875rem;
  color: var(--foreground);
}
.dk-chat-header-info .dk-status {
  font-family: var(--font-mono);
  font-size: .625rem;
  color: #34d399;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1px;
}
.dk-chat-header-info .dk-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: dk-pulse 2s ease-in-out infinite;
}

.dk-chat-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.dk-progress-pill {
  display: none;
  font-family: var(--font-mono);
  font-size: .5625rem;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  padding: .25rem .75rem;
  border-radius: 999px;
}
.dk-back-link {
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  padding: .25rem .75rem;
  border-radius: 999px;
  text-decoration: none;
  transition: color .15s;
}
.dk-back-link:hover { color: var(--foreground); }

/* Messages */
.dk-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dk-msg-center {
  text-align: center;
}
.dk-msg-center span {
  font-family: var(--font-mono);
  font-size: .5625rem;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  padding: .375rem 1rem;
  border-radius: 999px;
}

.dk-msg-row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.dk-msg-row.dk-user {
  flex-direction: row-reverse;
}

.dk-msg-av {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .6875rem;
  color: var(--primary-foreground);
  flex-shrink: 0;
  margin-top: 2px;
}

.dk-msg-body {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  max-width: 80%;
}
.dk-user .dk-msg-body { align-items: flex-end; }

.dk-bubble {
  padding: .75rem 1.125rem;
  border-radius: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.6;
}
.dk-bubble.titan {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-top-left-radius: .25rem;
}
.dk-bubble.user {
  background: var(--primary);
  color: var(--primary-foreground);
  border-top-right-radius: .25rem;
}

/* Chips */
.dk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}
.dk-chip {
  font-family: var(--font-mono);
  font-size: .625rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--secondary-foreground);
  padding: .375rem .875rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.dk-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Thinking dots */
.dk-thinking {
  display: flex;
  gap: .375rem;
  align-items: center;
  padding: .75rem 1.125rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  border-top-left-radius: .25rem;
  width: fit-content;
}
.dk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: dk-bounce 1s ease-in-out infinite;
}
.dk-dot:nth-child(2) { animation-delay: .15s; }
.dk-dot:nth-child(3) { animation-delay: .3s; }

/* Contact form */
.dk-contact-card {
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-left: 44px;
  display: none;
}
.dk-contact-card .dk-sub-label {
  font-family: var(--font-mono);
  font-size: .5625rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  margin-bottom: .875rem;
}
.dk-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
@media (max-width: 640px) {
  .dk-contact-grid { grid-template-columns: 1fr; }
}
.dk-contact-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .5625rem;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .25rem;
}
.dk-contact-field input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--foreground);
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.dk-contact-field input:focus {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}
.dk-submit-btn {
  width: 100%;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: .75rem;
  padding: .875rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  transition: opacity .15s;
}
.dk-submit-btn:hover { opacity: .9; }
.dk-submit-btn:disabled { opacity: .4; cursor: default; }

/* Success */
.dk-success-card {
  border: 1px solid color-mix(in srgb, #34d399 20%, transparent);
  background: color-mix(in srgb, #34d399 5%, transparent);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-left: 44px;
  text-align: center;
  display: none;
}
.dk-success-icon {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: #34d399;
  margin-bottom: .5rem;
}
.dk-success-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .875rem;
  color: var(--foreground);
  margin-bottom: .375rem;
}
.dk-success-sub {
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.dk-success-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.dk-success-actions a, .dk-success-actions button {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 600;
  padding: .625rem 1.25rem;
  border-radius: .5rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  border: none;
  transition: opacity .15s, color .15s;
}
.dk-success-primary { background: var(--primary); color: var(--primary-foreground); }
.dk-success-primary:hover { opacity: .9; }
.dk-success-secondary {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border) !important;
}
.dk-success-secondary:hover { color: var(--foreground); }

/* Disclaimer + Input */
.dk-disclaimer {
  padding: .5rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: .5625rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.dk-chat-input-row {
  display: flex;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--background);
  flex-shrink: 0;
}
.dk-chat-input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .75rem 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--foreground);
  outline: none;
  transition: border-color .15s;
}
.dk-chat-input::placeholder { color: var(--muted-foreground); }
.dk-chat-input:focus { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.dk-chat-send {
  width: 48px;
  height: 48px;
  border-radius: .75rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s;
}
.dk-chat-send:hover { opacity: .9; }
.dk-chat-send:disabled { opacity: .4; cursor: default; }

/* ── Spec Panel ── */
.dk-spec-pane {
  display: none;
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--card);
  flex-direction: column;
}
@media (min-width: 1024px) {
  .dk-spec-pane { display: flex; }
  .dk-progress-pill { display: inline-flex; }
}

.dk-spec-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dk-spec-header .dk-spec-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .875rem;
  color: var(--foreground);
}
.dk-spec-header .dk-spec-sub {
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.dk-spec-progress-wrap {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dk-spec-pct-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .625rem;
}
.dk-spec-pct-label {
  font-family: var(--font-mono);
  font-size: .5625rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.dk-spec-pct-value {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary);
}
.dk-bar {
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .625rem;
}
.dk-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width .5s ease;
  width: 0%;
}
.dk-step-dots {
  display: flex;
  gap: 4px;
}
.dk-step-dot {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  transition: background .3s;
}
.dk-step-dot.filled { background: var(--primary); }
.dk-step-dot.active { background: color-mix(in srgb, var(--primary) 40%, transparent); }

.dk-spec-rows {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.dk-spec-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  opacity: .3;
  transition: opacity .3s;
}
.dk-spec-row.filled { opacity: 1; }
.dk-spec-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background .2s, border-color .2s;
}
.dk-spec-row.filled .dk-spec-check {
  background: var(--primary);
  border-color: var(--primary);
}
.dk-spec-check svg { display: none; }
.dk-spec-row.filled .dk-spec-check svg { display: block; }
.dk-spec-row-text {}
.dk-spec-row-label {
  font-family: var(--font-mono);
  font-size: .5625rem;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dk-spec-row-value {
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--border);
  font-weight: 400;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.dk-spec-row.filled .dk-spec-row-value {
  color: var(--foreground);
  font-weight: 600;
}

.dk-spec-footer {
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}
.dk-spec-footer a {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  padding: .625rem 1rem;
  border-radius: .75rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: color .15s, border-color .15s;
}
.dk-spec-footer a:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.dk-spec-footer-note {
  font-family: var(--font-mono);
  font-size: .5rem;
  color: var(--muted-foreground);
  text-align: center;
  margin-top: .5rem;
}

@keyframes dk-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}
@keyframes dk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* Error line inside the contact card — the design had no failure state
   because it never actually submitted anything. */
.dk-contact-error {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: #e5646a;
  border-left: 2px solid #e5646a;
  padding: 8px 10px;
  margin: 10px 0 0;
  background: color-mix(in srgb, #e5646a 8%, transparent);
}
.dk-submit-btn[disabled] { opacity: .6; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════
   PARTS PICKER — the right pane, below the live spec
   ──────────────────────────────────────────────────────────────────────
   The interview settles what kind of kit this is; this settles which
   parts go in it. Without it the customer types "some temperature
   sensor" into a note and the team guesses at the quote.
   ═════════════════════════════════════════════════════════════════════ */
.dk-parts-block { border-top: 1px solid var(--border); padding: 18px 20px 20px; }
.dk-parts-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dk-parts-count { font-size: 11px; color: var(--fg3); }

.dk-parts-search { position: relative; }
.dk-parts-search__input {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px;
}
.dk-parts-search__input:focus { outline: none; border-color: var(--primary); }
.dk-parts-search__spin {
  position: absolute; right: 12px; top: 50%; width: 13px; height: 13px; margin-top: -7px;
  border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%;
  animation: dkPartsSpin .7s linear infinite;
}
@keyframes dkPartsSpin { to { transform: rotate(360deg); } }

/* Results drop under the box; the pane scrolls, so they are capped. */
.dk-parts-results {
  margin-top: 8px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.dk-part-hit {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.dk-part-hit:last-child { border-bottom: 0; }
.dk-part-hit:hover, .dk-part-hit:focus-visible { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.dk-part-hit img { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 3px; flex: none; }
.dk-part-hit__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dk-part-hit__name { font-size: 12.5px; color: var(--fg); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-part-hit__meta { font-size: 10px; color: var(--fg3); }
.dk-part-hit__price { font-size: 11.5px; color: var(--primary); flex: none; }

.dk-parts-none, .dk-parts-empty { font-size: 11px; color: var(--fg3); line-height: 1.7; margin: 12px 0 0; }

.dk-part-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.dk-part-row__img { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 3px; flex: none; }
.dk-part-row__body { flex: 1; min-width: 0; }
.dk-part-row__name { font-size: 12px; color: var(--fg); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-part-row__meta { font-size: 10px; color: var(--fg3); margin-top: 2px; }
.dk-part-row__qty { display: flex; align-items: center; gap: 5px; flex: none; }
.dk-part-row__qty button {
  width: 22px; height: 22px; line-height: 1; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 13px;
}
.dk-part-row__qty button:hover { border-color: var(--primary); color: var(--primary); }
.dk-part-row__qty span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; min-width: 16px; text-align: center; }
.dk-part-row__x { border: 0; background: none; color: var(--fg3); font-size: 16px; cursor: pointer; flex: none; padding: 0 2px; }
.dk-part-row__x:hover { color: #e5646a; }

.dk-parts-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--fg2);
}
.dk-parts-total b { color: var(--primary); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   CLOSEST KIT MATCH
   ──────────────────────────────────────────────────────────────────────
   Offered inside the conversation, not as a banner: it is Titan making a
   recommendation, so it reads as one. Shown once — dismissing removes it
   and the interview carries on.
   ═════════════════════════════════════════════════════════════════════ */
.dk-km {
  margin-top: 10px; max-width: 640px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: var(--radius); background: var(--bg2); overflow: hidden;
}
.dk-km__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 15px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.dk-km__pct { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.dk-km__meta { font-size: 10.5px; color: var(--fg3); }

.dk-km__body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 16px 15px; }
.dk-km__img { width: 132px; height: 118px; object-fit: contain; background: #fff; border-radius: 4px; }
.dk-km__img--none { background: var(--bg); border: 1px solid var(--border); }
.dk-km__name { font-size: 16px; font-weight: 700; color: var(--fg); text-decoration: none; line-height: 1.3; }
.dk-km__name:hover { color: var(--primary); }
.dk-km__sum { font-size: 13px; color: var(--fg2); line-height: 1.6; margin: 6px 0 12px; }
.dk-km__facts { display: flex; gap: 20px; flex-wrap: wrap; }
.dk-km__facts b { display: block; font-size: 15px; color: var(--fg); margin-top: 2px; }
.dk-km__facts > div:first-child b { color: var(--primary); }
.dk-km__k { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }

/* The delta — the reason this card exists. */
.dk-km-delta { border-top: 1px solid var(--border); padding: 14px 15px; }
.dk-km-delta__title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); margin-bottom: 11px; }
.dk-km-delta__row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.dk-km-delta__sign { width: 16px; flex: none; font-size: 14px; text-align: center; }
.dk-km-delta__sign--add  { color: var(--primary); }
.dk-km-delta__sign--drop { color: #ff9a97; }
.dk-km-delta__name { flex: 1; font-size: 13.5px; color: var(--fg); }
.dk-km-delta__name--out { color: var(--fg2); }
.dk-km-delta__price { font-size: 12px; color: var(--fg2); flex: none; }
.dk-km-delta__price--out { color: #ff9a97; }
.dk-km-delta__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border);
}
.dk-km-delta__total b { font-size: 20px; color: var(--primary); }

/* Its working, shown. A recommendation you cannot audit is worth less. */
.dk-km-why { border-top: 1px solid var(--border); padding: 13px 15px; }
.dk-km-why__title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); margin-bottom: 9px; }
.dk-km-why__row { display: flex; gap: 10px; font-size: 12.5px; color: var(--fg2); padding: 2px 0; }
.dk-km-why__row.is-off { color: var(--fg3); }
.dk-km-why__k { width: 62px; flex: none; font-size: 10px; color: var(--fg3); text-transform: uppercase; letter-spacing: .1em; padding-top: 2px; }

.dk-km__cta { display: flex; gap: 9px; padding: 0 15px 15px; }
.dk-km__btn {
  flex: 1; text-align: center; cursor: pointer; text-decoration: none;
  padding: 11px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: none; color: var(--fg2);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
}
.dk-km__btn:hover { border-color: var(--primary); color: var(--primary); }
.dk-km__btn--go { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); font-weight: 700; }
.dk-km__btn--go:hover { filter: brightness(1.08); color: var(--primary-fg); }

.dk-km-alts { border-top: 1px solid var(--border); padding: 12px 15px 14px; }
.dk-km-alts__title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); margin-bottom: 8px; }
.dk-km-alt {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  text-decoration: none; border-bottom: 1px solid var(--border);
}
.dk-km-alt:last-child { border-bottom: 0; }
.dk-km-alt__name  { flex: 1; font-size: 13px; color: var(--fg); }
.dk-km-alt:hover .dk-km-alt__name { color: var(--primary); }
.dk-km-alt__pct   { font-size: 10.5px; color: var(--fg3); flex: none; }
.dk-km-alt__price { font-size: 12.5px; color: var(--primary); flex: none; width: 86px; text-align: right; }

@media (max-width: 640px) {
  .dk-km__body { grid-template-columns: 1fr; }
  .dk-km__img { width: 100%; height: 150px; }
  .dk-km__cta { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════
   LEGIBILITY PASS — the whole page, one step up
   ──────────────────────────────────────────────────────────────────────
   Titan was built almost entirely on .5–.75rem — 8px to 12px — including
   the chat bubbles a customer is meant to READ and the chips they are
   meant to tap. Small text is a house style for a SKU or a label; it is
   the wrong choice for a conversation. Everything below is sized for
   reading at a normal viewing distance, with contrast lifted off the
   dimmest greys onto the ones the design system actually reserves for
   body text. Headings are left alone.
   ═════════════════════════════════════════════════════════════════════ */

/* ── The conversation ── */
.dk-bubble        { font-size: 15px; line-height: 1.7; }
.dk-bubble.titan  { color: var(--fg); }
.dk-bubble.user   { color: var(--fg); }
.dk-msg-av        { font-size: 12px; }
.dk-msg-center span { font-size: 12px; letter-spacing: .1em; }

/* Chips are hit targets as well as text: 10px was small to read and
   small to tap. 44px minimum height is the accessible floor. */
.dk-chip {
  font-size: 13px; padding: 11px 16px; line-height: 1.35;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* ── Header ── */
.dk-chat-header-info .dk-name   { font-size: 15px; }
.dk-chat-header-info .dk-status { font-size: 11px; letter-spacing: .1em; }
.dk-progress-pill { font-size: 12px; padding: 6px 12px; }
.dk-back-link     { font-size: 12.5px; }

/* ── Input row: this is a text field people type sentences into ── */
.dk-chat-input { font-size: 15px; padding: 14px 16px; }
.dk-chat-input::placeholder { color: var(--fg3); }
.dk-disclaimer { font-size: 11.5px; line-height: 1.7; color: var(--fg3); }

/* ── The live spec panel ── */
.dk-spec-header .dk-spec-title { font-size: 15px; }
.dk-spec-header .dk-spec-sub   { font-size: 11.5px; }
.dk-spec-pct-label { font-size: 11px; letter-spacing: .12em; }
.dk-spec-pct-value { font-size: 12.5px; }
.dk-spec-row-label { font-size: 11px; letter-spacing: .1em; color: var(--fg3); }
.dk-spec-row-value { font-size: 13.5px; line-height: 1.5; color: var(--fg2); }
.dk-spec-row.filled .dk-spec-row-value { color: var(--fg); }
.dk-spec-footer, .dk-spec-footer a, .dk-spec-footer-note { font-size: 12px; line-height: 1.7; }

/* ── Contact and success cards ── */
.dk-sub-label     { font-size: 12px; letter-spacing: .1em; }
.dk-contact-field input, .dk-contact-field label { font-size: 14px; }
.dk-contact-field input { padding: 12px 14px; }
.dk-submit-btn    { font-size: 14px; padding: 14px; }
.dk-success-title { font-size: 19px; }
.dk-success-sub   { font-size: 14px; line-height: 1.7; }
.dk-success-actions a, .dk-success-actions button { font-size: 13px; padding: 12px 16px; }

/* ── Parts picker ── */
.dk-parts-count            { font-size: 12px; }
.dk-parts-search__input    { font-size: 13.5px; padding: 12px 14px; }
.dk-part-hit__name         { font-size: 13.5px; }
.dk-part-hit__meta         { font-size: 11px; }
.dk-part-hit__price        { font-size: 12.5px; }
.dk-parts-none, .dk-parts-empty { font-size: 12.5px; line-height: 1.75; }
.dk-part-row__name         { font-size: 13px; }
.dk-part-row__meta         { font-size: 11px; }
.dk-part-row__qty span     { font-size: 13px; }
.dk-part-row__qty button   { width: 26px; height: 26px; font-size: 15px; }
.dk-parts-total            { font-size: 13px; }
.dk-parts-total b          { font-size: 16px; }

/* ── The kit match card ── */
.dk-km__pct        { font-size: 11px; }
.dk-km__meta       { font-size: 11.5px; }
.dk-km__name       { font-size: 17px; }
.dk-km__sum        { font-size: 14px; line-height: 1.65; }
.dk-km__k          { font-size: 10.5px; }
.dk-km__facts b    { font-size: 16px; }
.dk-km-delta__title, .dk-km-why__title, .dk-km-alts__title { font-size: 11px; }
.dk-km-delta__name { font-size: 14px; }
.dk-km-delta__price{ font-size: 13px; }
.dk-km-delta__total b { font-size: 21px; }
.dk-km-why__row    { font-size: 13.5px; }
.dk-km-why__k      { font-size: 10.5px; width: 66px; }
.dk-km__btn        { font-size: 13px; padding: 13px 12px; min-height: 44px; }
.dk-km-alt__name   { font-size: 13.5px; }
.dk-km-alt__pct    { font-size: 11.5px; }
.dk-km-alt__price  { font-size: 13px; }

/* ── Phones: one more step, and room to tap ── */
@media (max-width: 640px) {
  .dk-bubble     { font-size: 15.5px; }
  .dk-chip       { font-size: 13.5px; padding: 12px 16px; }
  .dk-chat-input { font-size: 16px; }   /* 16px stops iOS zooming the field */
  .dk-spec-row-value { font-size: 14px; }
  .dk-km__sum, .dk-km-delta__name { font-size: 14.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RIGHT PANE WIDTH
   The spec pane shipped at a fixed 320px, which was tight once the parts
   picker and kit-match card landed in it. The chat pane is flex:1 with
   min-width:0, so widening this track just takes space from the chat
   column and nothing overflows. Steps up on wider viewports.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .dk-spec-pane { width: 400px; }
}
@media (min-width: 1280px) {
  .dk-spec-pane { width: 450px; }
}
@media (min-width: 1600px) {
  .dk-spec-pane { width: 500px; }
}

/* With more room the picker rows can breathe instead of wrapping */
@media (min-width: 1280px) {
  .dk-spec-header,
  .dk-spec-body,
  .dk-spec-foot { padding-left: 1.5rem; padding-right: 1.5rem; }
  .dk-km__body { grid-template-columns: 150px minmax(0, 1fr); }
}

/* ── Sign-in card inside the conversation ──
   A brief belongs to an account, and Titan asks for one at the end of the
   interview rather than at a gate in front of it. Reuses .dk-contact-card so it
   sits in the chat like every other Titan card. */
.dk-titan-authtext { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--fg2); }
.dk-titan-authbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dk-titan-authbtns .dk-submit-btn {
  width: auto; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.dk-titan-authalt {
  font: inherit; font-size: 12.5px; color: var(--fg2); background: none;
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px; cursor: pointer;
}
.dk-titan-authalt:hover { border-color: var(--primary); color: var(--primary); }

/* Consent tick inside the contact card. Same shape as the one on the register
   page and the kit request form, so the three read as one thing. */
.dk-consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--fg2); cursor: pointer;
}
.dk-consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--primary); flex: 0 0 auto; cursor: pointer; }
.dk-consent a { color: var(--primary); }

/* ── Oct 2026: freedom controls ─────────────────────────────────────────────
   Skip / finish row under the input, toggled multi-select chips, editable and
   skipped spec rows. Appended rather than woven in so the diff stays readable. */
.dk-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: 0 1.25rem .75rem;
  background: var(--background);
  flex-shrink: 0;
}
.dk-quick {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .04em;
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted-foreground);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}
.dk-quick:hover { color: var(--primary); }
.dk-quick--go { margin-left: auto; color: var(--primary); }
.dk-quick[hidden] { display: none; }

/* Chips: spent (an earlier question), ghost (skip / done / change), on (multi-select toggled). */
.dk-chip.is-spent { opacity: .3; cursor: default; }
.dk-chip--ghost {
  border-style: dashed;
  color: var(--muted-foreground);
}
.dk-chip.on {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.dk-chip.on span::before { content: '✓ '; }

/* Spec rows are buttons now. */
.dk-spec-row { cursor: pointer; position: relative; border-radius: .5rem; padding: .25rem .375rem; margin: 0 -.375rem; }
.dk-spec-row:hover, .dk-spec-row:focus-visible { background: color-mix(in srgb, var(--primary) 6%, transparent); outline: none; }
.dk-spec-row.editing { background: color-mix(in srgb, var(--primary) 10%, transparent); opacity: 1; }
.dk-spec-row-edit {
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-left: auto;
  align-self: center;
  opacity: 0;
  transition: opacity .15s;
}
.dk-spec-row.filled:hover .dk-spec-row-edit, .dk-spec-row.filled:focus-visible .dk-spec-row-edit { opacity: 1; }
.dk-spec-row.skipped .dk-spec-check { background: transparent; border-color: var(--border); }
.dk-spec-row.skipped .dk-spec-check svg { display: none; }
.dk-spec-row.skipped .dk-spec-row-value { color: var(--muted-foreground); font-style: italic; }
.dk-spec-rows.is-locked .dk-spec-row { cursor: default; pointer-events: none; }
.dk-spec-rows.is-locked .dk-spec-row-edit { display: none; }
.dk-spec-optional {
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-left: .5rem;
  font-weight: 400;
}
.dk-contact-fine { font-size: 11px; color: var(--muted-foreground); margin: 10px 0 0; line-height: 1.6; }
@media (max-width: 640px) {
  .dk-quick-row { padding: 0 1rem .625rem; }
  .dk-spec-row-edit { opacity: 1; }
}