/**
 * Takukan chat — the conversation component, on its own.
 *
 * Everything `tkc-`: the panel, the transcript, bubbles, cards, the
 * composer and the embedded variant. It lived inside consumer.css, which
 * meant the console — which embeds the same bot on the developer lobby —
 * loaded none of it: the chat there rendered as unstyled blocks with a
 * composer stacked three rows high. Loading consumer.css in the console
 * was not the answer, because that file also styles the consumer pages
 * and five shared design-system classes.
 *
 * Every selector here is scoped under a tkc- class, so this file is inert
 * on a page that has no chat on it. Load it wherever the bot appears
 * (partials/bot-chat pushes it automatically); on consumer pages it is
 * loaded before consumer.css, which is the order it had inside it.
 */
/* Staff preview ribbon — an unpublished page always says so, loudly. */
.tkc-preview-ribbon {
  position: sticky; top: 0; z-index: 60;
  background: var(--tk-slate); color: #F7F5F1;
  border-block-end: 3px solid var(--tk-amber-fill, #C9A34E);
  padding: 9px 18px; font-size: 13.5px; text-align: center;
}
.tkc-preview-ribbon a { color: #E0B361; font-weight: 700; margin-inline-start: 8px; }

/* The marketing band above a scoped chat: name, facts, CTAs. Compact by
   design — it introduces, the chat converts. */
.tkc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1160px; margin-inline: auto; padding: 26px 18px 4px;
  flex-wrap: wrap;
}
.tkc-hero-kicker { color: var(--tk-bronze, #8A6420); letter-spacing: .14em; }
.tkc-hero-title { font-size: clamp(26px, 4vw, 36px); font-weight: 800; line-height: 1.15; margin: 2px 0 4px; }
.tkc-hero-lead { color: var(--tk-slate-muted); font-size: 15px; line-height: 1.65; max-width: 560px; margin: 0 0 10px; }
.tkc-hero-ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.tkc-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.tkc-hero-stat {
  min-width: 92px; text-align: center;
  background: var(--tk-surface-raised, #fff); border: 1px solid var(--tk-line);
  border-radius: 12px; padding: 10px 14px;
}
.tkc-hero-stat strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.tkc-hero-stat span { font-size: 12px; color: var(--tk-slate-muted); }
@media (max-width: 900px) { .tkc-hero { padding-block-start: 16px; } .tkc-hero-stats { width: 100%; } .tkc-hero-stat { flex: 1; min-width: 74px; padding: 8px 6px; } }
.tkc-hero { padding-block: 14px 10px; }
.tkc-hero-title { font-size: clamp(20px, 3vw, 26px); margin-block: 2px 4px; }
.tkc-hero-lead { display: none; }
.tkc-hero-stat { padding: 8px 12px; }
.tkc-hero-stat strong { font-size: 17px; }

/* ── The place band ─────────────────────────────────────────────────────
   An area chat door is a page about a city, and a page about a city
   should look like the city. With a photograph (Wikipedia's lead image,
   or the stored Street View hero) the band becomes a real header: the
   picture behind, a scrim over it, and the summary — normally hidden to
   keep the band compact — allowed back in for two or three lines,
   because on an area door that sentence IS the basic information the
   visitor came for.

   Without a photograph the map takes the same slot, inert, so a place
   with no enrichment at all still arrives somewhere rather than at a
   name on white. */
.tkc-hero[data-bg] {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: none; margin-block-end: 10px;
  padding: 26px max(18px, calc((100% - 1160px) / 2)) 22px;
  min-height: 190px; align-items: flex-end;
  background-size: cover; background-position: center;
  color: #F7F5F1;
}
.tkc-hero[data-bg]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28,35,43,.34) 0%, rgba(28,35,43,.62) 55%, rgba(28,35,43,.86) 100%);
}
.tkc-hero[data-bg="none"] { min-height: 0; background: var(--tk-slate, #1B2A36); }
.tkc-hero[data-bg="none"]::after { background: linear-gradient(180deg, rgba(27,42,54,.55), rgba(27,42,54,.92)); }
.tkc-hero[data-bg] .tkc-hero-map {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; border: 0; pointer-events: none; filter: saturate(.85);
}
.tkc-hero[data-bg] .tkc-hero-kicker { color: #E0B361; }
.tkc-hero[data-bg] .tkc-hero-title { text-shadow: 0 1px 14px rgba(20,26,32,.45); }
.tkc-hero[data-bg] .tkc-hero-lead {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  color: rgba(247,245,241,.92); margin-block-end: 10px;
}
.tkc-hero[data-bg] .tkc-hero-stat {
  background: rgba(20,26,32,.42); border-color: rgba(247,245,241,.28); color: #F7F5F1;
  backdrop-filter: blur(3px);
}
.tkc-hero[data-bg] .tkc-hero-stat span { color: rgba(247,245,241,.78); }
.tkc-hero[data-bg] .tk-btn-secondary {
  background: rgba(247,245,241,.14); border-color: rgba(247,245,241,.5); color: #F7F5F1;
}
.tkc-hero[data-bg] .tk-btn-secondary:hover { background: rgba(247,245,241,.24); }

/* What is around the place, on the band itself — counts only, because
   the band introduces and the chat answers. */
.tkc-hero-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 0 10px; }
.tkc-hero-fact {
  font-size: 12.5px; line-height: 1; padding: 6px 10px; border-radius: 999px;
  background: var(--tk-surface-alt, #F0EBE3); color: var(--tk-slate-muted);
  border: 1px solid var(--tk-line);
}
.tkc-hero[data-bg] .tkc-hero-fact {
  background: rgba(247,245,241,.16); border-color: rgba(247,245,241,.34); color: #F7F5F1;
}

/* CC BY-SA is only satisfied by a credit somebody can actually read and
   follow, so it sits on the image it belongs to — small, but present and
   linked. Never hidden on small screens. */
.tkc-hero-credit {
  position: absolute; inset-block-end: 5px; inset-inline-end: 10px; z-index: 1;
  font-size: 10.5px; line-height: 1.5; color: rgba(247,245,241,.7);
  max-width: min(58%, 460px); text-align: end;
}
.tkc-hero-credit a { color: rgba(247,245,241,.9); text-decoration: underline; }
/* On a phone the chat IS the product, so the band introduces in as little
   height as it can: two lines of summary, one scrolling row of facts, and
   stats that do not become a block of their own. */
@media (max-width: 700px) {
  .tkc-hero[data-bg] { min-height: 150px; padding-block: 16px 22px; gap: 10px; }
  .tkc-hero[data-bg] .tkc-hero-lead { -webkit-line-clamp: 2; font-size: 14px; margin-block-end: 8px; }
  .tkc-hero-facts {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -2px; padding-inline: 2px;
  }
  .tkc-hero-facts::-webkit-scrollbar { display: none; }
  .tkc-hero-fact { flex: 0 0 auto; }
  .tkc-hero[data-bg] .tkc-hero-stats { gap: 8px; }
  .tkc-hero[data-bg] .tkc-hero-stat { padding: 6px 8px; min-width: 0; }
  .tkc-hero[data-bg] .tkc-hero-stat strong { font-size: 15px; }
  .tkc-hero[data-bg] .tkc-hero-stat span { font-size: 11px; }
  .tkc-hero-credit { max-width: 92%; }
}

/* project gallery + projects strip in the chat side rail */
.tkc-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-block-start: 8px; }
.tkc-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.tkc-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.tkc-mk-projects { display: flex; flex-direction: column; margin-block-start: 6px; }
.tkc-mk-project {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 8px 0; border-block-end: 1px solid var(--tk-line);
  text-decoration: none; color: inherit; font-size: 13.5px;
}
.tkc-mk-project:last-child { border-block-end: 0; }
.tkc-mk-project:hover strong { text-decoration: underline; }

.tkc-shell {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--tk-space-6);
  padding: 0;
}
@media (min-width: 900px) {
  .tkc-shell { padding: var(--tk-space-6); align-items: flex-start; }
}

.tkc-app {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  background: var(--tk-surface);
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 900px) {
  .tkc-app {
    min-height: 0;
    height: min(860px, calc(100dvh - 48px));

    border: 10px solid var(--tk-slate);
    border-radius: 34px;
    overflow: hidden;
    box-shadow: var(--tk-shadow-2);
  }
}

/* header — logo right (RTL start), human escape hatch end */
.tkc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--tk-space-3) var(--tk-space-4);
  background: var(--tk-surface-raised);
  border-block-end: 1px solid var(--tk-line);
  gap: var(--tk-space-3);
  flex: none;
}
/* Header cut per the Product UI canvas: 18px solid-stone arch, Heebo 400. */
.tkc-header .tk-wordmark { font-size: 15.5px; font-weight: 400; letter-spacing: .09em; text-indent: .09em; }
.tkc-human-link { color: var(--tk-teal); font-weight: 600; font-size: 13.5px; border: 0; background: none; cursor: pointer; white-space: nowrap; }

/* the live-filling checklist — "מה כבר ידוע עליך" */
.tkc-known {
  border-block-end: 1px solid var(--tk-line);
  background: var(--tk-surface-raised);
  padding: var(--tk-space-2) var(--tk-space-4) var(--tk-space-3);
  flex: none;
}
.tkc-known-title { font-size: 13px; font-weight: 700; }
.tkc-known-progress { font-size: 12px; color: var(--tk-slate-muted); }
.tkc-known-head { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: 8px; }
.tkc-known-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tkc-slot-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--tk-radius-pill); padding: 3px 12px;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--tk-line); color: var(--tk-slate-muted); background: var(--tk-surface);
}
.tkc-slot-chip[data-state="filled"] { background: var(--tk-slate); color: var(--tk-surface); border-color: var(--tk-slate); }
.tkc-slot-chip[data-state="active"] { border-color: var(--tk-amber-fill); color: var(--tk-slate); box-shadow: inset 0 -2px 0 var(--tk-amber-fill); }
.tkc-progress-track { height: 3px; background: var(--tk-surface-alt); border-radius: 2px; margin-block-start: 10px; overflow: hidden; display: flex; justify-content: flex-start; }
.tkc-progress-fill { height: 3px; background: var(--tk-amber-fill); border-radius: 2px; transition: width .4s ease; }

/* chat log */
.tkc-log {
  flex: 1; overflow-y: auto;
  padding: var(--tk-space-4);
  display: flex; flex-direction: column; gap: var(--tk-space-3);
  scroll-behavior: smooth;
}
/* pre-line: a reply's paragraphs are bubbles (split on blank lines), and a
   single line break inside one is a list — one line per project in a
   company chat's facts — or an agent's own Enter. It used to collapse into
   a space and run the list together. */
.tkc-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.55; overflow-wrap: break-word; white-space: pre-line; }
.tkc-msg-assistant { align-self: flex-start; background: var(--tk-surface-raised); border: 1px solid var(--tk-line); border-start-start-radius: 4px; }
.tkc-msg-user { align-self: flex-end; background: var(--tk-slate); color: var(--tk-surface); border-start-end-radius: 4px; }
.tkc-msg-agent { align-self: flex-start; background: rgba(51,105,104,.10); border: 1px solid var(--tk-teal); border-start-start-radius: 4px; }
.tkc-disclosure {
  background: var(--tk-surface-alt); color: var(--tk-slate-muted);
  border-radius: var(--tk-radius-input); padding: 10px 14px;
  font-size: 13px; line-height: 20px;
}
.tkc-msg b, .tkc-msg strong { font-weight: 700; }

/* The AI notice folded (v1.99.0): one muted line, the full text a tap away. */
.tk-ai-note { font-size: 12.5px; line-height: 18px; color: var(--tk-slate-muted); }
.tk-ai-note > summary { cursor: pointer; list-style: none; }
.tk-ai-note > summary::-webkit-details-marker { display: none; }
.tk-ai-note-more { color: var(--tk-teal); text-decoration: underline; text-underline-offset: 2px; margin-inline-start: 2px; }
.tk-ai-note[open] .tk-ai-note-more { display: none; }
.tk-ai-note > p { margin: 6px 0 0; }
.tkc-disclosure.tk-ai-note, .tkc-welcome-disclosure.tk-ai-note { background: none; padding: 2px 2px; border-radius: 0; font-size: 12.5px; line-height: 18px; }

/* quick replies */
.tkc-quick { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.tkc-quick .tk-chip { min-height: var(--tk-touch-min); }

/* answer controls (v1.27) — a checkbox panel or a number pad, offered
   beside the composer rather than instead of it. Logical properties
   throughout: the panel is laid out by the document's direction. */
.tkc-picker {
  align-self: flex-start;
  max-inline-size: min(100%, 520px);
  padding: var(--tk-space-3);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-card);
  background: var(--tk-surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-3);
}
.tkc-picker-hint { font-size: 12.5px; color: var(--tk-slate-muted); }
.tkc-picker-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tkc-picker-grid .tk-chip, .tkc-picker-actions .tk-chip { min-height: var(--tk-touch-min); }
/* Amber is a fill, never an outline: a picked option is filled, an
   unpicked one is the plain chip it already was. */
.tkc-pick[aria-pressed="true"] {
  background: var(--tk-amber-fill);
  border-color: var(--tk-amber-fill);
  color: var(--tk-amber-text);
  font-weight: 600;
}
.tkc-picker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tkc-picker-send { min-height: var(--tk-touch-min); padding-inline: var(--tk-space-4); }
.tkc-picker-send[disabled] { opacity: .45; cursor: default; }
.tkc-pick-none { margin-inline-start: auto; }

/* the "something else" line — a chip that turns into a field in place */
.tkc-custom { display: inline-flex; align-items: center; gap: 6px; }
.tkc-custom-input {
  min-height: var(--tk-touch-min);
  min-inline-size: 10rem;
  padding: 6px 10px;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-pill);
  font: inherit;
  color: inherit;
  background: var(--tk-surface-raised);
}
.tkc-custom-input:focus-visible { outline: 3px solid var(--tk-focus); outline-offset: 2px; }

/* number pad */
.tkc-numrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tk-space-3); }
.tkc-num { display: flex; flex-direction: column; gap: 4px; }
.tkc-num-label { font-size: 12.5px; color: var(--tk-slate-muted); }
.tkc-num-input {
  inline-size: 7.5rem;
  min-height: var(--tk-touch-min);
  padding: 6px 10px;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-input);
  font: inherit;
  /* A number is read left-to-right in every language on this page. */
  direction: ltr;
  text-align: start;
  font-variant-numeric: tabular-nums;
  background: var(--tk-surface-raised);
  color: inherit;
}
.tkc-num-input:focus-visible { outline: 3px solid var(--tk-focus); outline-offset: 2px; }
.tkc-num-unit { font-size: 13px; color: var(--tk-slate-muted); padding-block-end: 10px; }

@media (max-width: 480px) {
  .tkc-num-input { inline-size: 6rem; }
  .tkc-picker { max-inline-size: 100%; }
}

/* match card inside chat */
.tkc-match-card { align-self: stretch; max-width: 100%; padding: var(--tk-space-4); }
.tkc-match-head { display: flex; justify-content: space-between; gap: var(--tk-space-3); align-items: start; }
.tkc-match-title { font-size: 17px; font-weight: 700; }
.tkc-match-sub { font-size: 13px; color: var(--tk-slate-muted); margin-block-start: 2px; }
.tkc-match-rule { height: 2px; background: var(--tk-amber-fill); border-radius: 2px; margin: 10px 0 4px; }
.tkc-stale { color: var(--tk-clay); font-size: 12px; }

/* comparables (seller flow) */
.tkc-comparables { align-self: stretch; }
.tkc-comparable { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-block-end: 1px solid var(--tk-line); font-size: 14px; }
.tkc-comparable:last-child { border-block-end: 0; }

/* composer */
.tkc-composer {
  flex: none; display: flex; gap: var(--tk-space-2);
  padding: var(--tk-space-3) var(--tk-space-4) calc(var(--tk-space-3) + env(safe-area-inset-bottom));
  background: var(--tk-surface); border-block-start: 1px solid var(--tk-line);
}
.tkc-composer input {
  flex: 1; min-height: var(--tk-control-h);
  border: 1px solid var(--tk-line); border-radius: var(--tk-radius-pill);
  background: var(--tk-surface-raised); font: inherit; font-size: 15px;
  padding: 0 var(--tk-space-4); color: var(--tk-slate);
}
.tkc-composer input:focus { outline: 2px solid var(--tk-teal); }
.tkc-send {
  min-width: var(--tk-control-h); min-height: var(--tk-control-h);
  border-radius: 50%; border: 0; background: var(--tk-slate); color: var(--tk-surface);
  font-size: 18px; cursor: pointer; display: grid; place-items: center;
}
.tkc-send svg { transform: scaleX(-1); }
.tkc-tool {
  min-width: var(--tk-control-h); min-height: var(--tk-control-h);
  border-radius: 50%; border: 1px solid var(--tk-line);
  background: var(--tk-surface-raised); color: var(--tk-slate-muted);
  cursor: pointer; display: grid; place-items: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .25s ease;
}
.tkc-tool:hover { color: var(--tk-slate); border-color: var(--tk-slate); }
.tkc-tool.is-live { background: var(--tk-slate); color: var(--tk-surface); border-color: var(--tk-slate); }
#tkc-mic.is-live { background: var(--tk-clay); border-color: var(--tk-clay); animation: tkc-pulse 1.4s ease-in-out infinite; }
@keyframes tkc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { #tkc-mic.is-live { animation: none; } }

/* side panel (desktop): screens nav like the prototype */
.tkc-side { display: none; }
@media (min-width: 900px) {
  .tkc-side { display: block; width: 290px; padding-block-start: var(--tk-space-2); }
  .tkc-side .tk-card { padding: 14px 16px; margin-block-end: 10px; display: block; color: inherit; border-bottom: 1px solid var(--tk-line); }
  .tkc-side a.tk-card:hover { border-color: var(--tk-slate-muted); }
}

/* standalone pages (matches list, detail, calculator, privacy, handoff) */
.tkc-page { max-width: 560px; margin: 0 auto; padding: var(--tk-space-5) var(--tk-space-4) var(--tk-space-8); }
.tkc-page-header { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--tk-space-5); }
.tkc-list-row { padding: var(--tk-space-4); margin-block-end: var(--tk-space-3); display: block; color: inherit; }
.tkc-hero-img {
  background: repeating-linear-gradient(45deg, var(--tk-surface-alt), var(--tk-surface-alt) 12px, #E5DFD5 12px, #E5DFD5 24px);
  border-radius: var(--tk-radius-card); min-height: 180px; position: relative;
}
.tkc-hero-stamp {
  position: absolute; inset-inline-end: 10px; inset-block-end: 10px;
  background: var(--tk-slate); color: var(--tk-surface);
  font-size: 11px; padding: 2px 8px; border-radius: 3px;
}

/* true-cost table */
.tkc-cost-row { display: flex; justify-content: space-between; padding: 10px 0; border-block-end: 1px solid var(--tk-line); font-size: 15px; }
.tkc-cost-row:last-child { border-block-end: 0; }
.tkc-cost-row [data-tnum] { font-weight: 700; }
.tkc-cost-row.is-linkage [data-tnum] { color: var(--tk-clay); }
.tkc-cost-row.is-total { font-size: 17px; }
.tkc-cost-row.is-total [data-tnum] { font-size: 20px; }

/* toggles (privacy centre) */
.tkc-toggle-card { display: flex; align-items: center; justify-content: space-between; gap: var(--tk-space-3); padding: var(--tk-space-4); margin-block-end: var(--tk-space-3); }
.tkc-switch { position: relative; width: 52px; height: 30px; flex: none; }
.tkc-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tkc-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--tk-surface-alt); border: 1px solid var(--tk-line); transition: background .15s; }
.tkc-switch-knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--tk-surface-raised); box-shadow: var(--tk-shadow-1); transition: transform .15s; }
.tkc-switch input:checked ~ .tkc-switch-track { background: var(--tk-sage); border-color: var(--tk-sage); }
.tkc-switch-knob { transition: inset-inline-start .18s var(--tk-glide, ease); }
.tkc-switch input:checked ~ .tkc-switch-knob { inset-inline-start: calc(100% - 27px); }
.tkc-switch.tkp-sm { width: 40px; height: 24px; }
.tkc-switch.tkp-sm .tkc-switch-knob { width: 18px; height: 18px; top: 2px; inset-inline-start: 2px; }
.tkc-switch.tkp-sm input:checked ~ .tkc-switch-knob { inset-inline-start: calc(100% - 20px); }

/* SLA countdown (handoff / trust contract) */
.tkc-sla { text-align: center; padding: var(--tk-space-4); background: var(--tk-surface-alt); border-radius: var(--tk-radius-input); }
.tkc-sla-clock { font-size: 30px; font-weight: 700; color: var(--tk-teal); font-variant-numeric: tabular-nums; direction: ltr; }
.tkc-sla-track { height: 4px; background: var(--tk-line); border-radius: 2px; margin: 10px 0; overflow: hidden; display: flex; justify-content: flex-start; }
.tkc-sla-fill { height: 4px; background: var(--tk-teal); }

/* ── Blank first state — the welcome card (v1.1) ─────────────────────────
   Rendered server-side inside the log; chat.js removes it the moment a
   session exists or the visitor starts the conversation. */
/* safe center, and flex-start declared first as its fallback.
   Plain `align-items: center` centres a child that is TALLER than its
   container by overflowing it equally in both directions — and the half
   that goes above the scroll container can never be scrolled to. That is
   why the welcome card's own heading was cut in half by the checklist bar
   on every screen the card did not fit: not a scroll position, an
   unreachable overflow. `safe` keeps the centring while it fits and falls
   back to the start when it does not. */
.tkc-welcome {
  display: flex; justify-content: center; min-height: 100%; padding: 8px 2px;
  align-items: flex-start;
  align-items: safe center;
}
.tkc-welcome-card { max-width: 420px; width: 100%; text-align: start; }
.tkc-welcome-title { font-size: 22px; font-weight: 700; margin: 2px 0 6px; }
.tkc-welcome-lead { font-size: 15px; color: var(--tk-ink-soft, #4A5560); margin: 0 0 14px; }
.tkc-welcome-steps { margin: 0 0 16px; padding-inline-start: 20px; display: grid; gap: 9px; font-size: 14px; }
.tkc-welcome-steps li::marker { color: var(--tk-amber-fill, #C9A34E); font-weight: 700; }
.tkc-welcome-start { width: 100%; }
.tkc-welcome-disclosure { margin-block-start: 12px; padding: 8px 10px; background: var(--tk-surface-alt); border-radius: var(--tk-radius-input); color: var(--tk-ink-soft, #4A5560); }

/* Project chip in the chat header (project-scoped chats) */
.tkc-header-project { font-size: 12.5px; color: var(--tk-ink-soft, #4A5560); background: var(--tk-surface-alt); border-radius: 999px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; max-width: 34%; text-align: center; }
.tkc-header .tk-logo { flex: none; }
/* The row is never wider than the app — 430px, 410px inside the desktop
   frame — and it holds the lockup, the language switch, three tools and
   the way to a person (v1.56). At 8px gaps that did not fit: "דבר עם בן
   אדם" was clipped in the frame and, on a phone, pushed past the edge so
   the whole page scrolled sideways. So the row is tight everywhere, the
   project chip (squeezed to an empty pill at every width — the page
   above already names the project) is gone, and below 420px the lockup
   is the arch alone (the <picture> in the header). */
/* Wrapping is the net under all of it: a label longer in another
   language, or a 320px screen, puts the last item on a second line
   instead of pushing the page sideways. */
.tkc-header { gap: 6px; padding-inline: 12px; flex-wrap: wrap; row-gap: 4px; }
.tkc-header .tkc-header-project { display: none; }
.tkc-header .tkc-header-tool { width: 32px; height: 32px; }

/* Save-your-matches banner — appears once, right after the first match cards */
.tkc-save-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 10px 14px; background: var(--tk-surface-alt); border: 1px solid var(--tk-line); border-inline-start: 3px solid var(--tk-amber-fill, #C9A34E); border-radius: var(--tk-radius-input); font-size: 13.5px; }
.tkc-save-cta-close { background: none; border: 0; cursor: pointer; color: var(--tk-ink-soft, #4A5560); font-size: 13px; padding: 2px 6px; }

/* Consumer account pages (login / החיפושים שלי) */
.tkc-account { max-width: 480px; margin-inline: auto; padding: 28px 16px 40px; }
.tkc-account .tk-card { padding: 22px; }
.tkc-me-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-block-end: 1px solid var(--tk-line); }
.tkc-me-row:last-child { border-block-end: 0; }
.tkc-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-input); background: var(--tk-surface-raised); padding: 10px 14px; font-size: 15px; cursor: pointer; text-decoration: none; color: inherit; }
.tkc-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--tk-ink-soft, #4A5560); font-size: 12.5px; }
.tkc-or::before, .tkc-or::after { content: ''; flex: 1; height: 1px; background: var(--tk-line); }

/* Geo enrichment — the area door becomes a place */
.tkc-welcome-hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tk-radius-card, 12px); margin: 12px 0 4px; border: 1px solid var(--tk-line); }
.tkc-geo-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-block: 10px 2px; }
.tkc-geo-chip { font-size: 12.5px; cursor: default; }
.tkc-geo-links { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-block-start: 6px; }
.tkc-geo-links a { color: var(--tk-ink-soft, #4A5560); }

/* ══ Chat UI parity extras ═══════════════════════════════════════════════
   The Quipbo behaviors in Takukan's skin: typing indicator, arch avatars
   per message cluster, HH:MM captions + day chips, header sound toggle,
   emoji picker, drag-drop ring, new-messages jump pill, resume divider.
   All chrome icons inline SVG; amber stays a fill; logical properties only. */

/* message rows — the brand arch beside assistant/agent clusters */
.tkc-mrow { display: flex; align-items: flex-start; gap: 8px; }
.tkc-mrow-user { justify-content: flex-end; }
.tkc-mrow-cont { margin-block-start: -6px; }
.tkc-mrow-assistant.tkc-mrow-cont, .tkc-mrow-agent.tkc-mrow-cont { padding-inline-start: 34px; }
.tkc-avatar {
  flex: none; width: 26px; height: 26px; margin-block-start: 1px;
  border-radius: 50%; background: var(--tk-surface-raised);
  border: 1px solid var(--tk-line); color: var(--tk-slate);
  display: grid; place-items: center;
}
.tkc-mrow-agent .tkc-avatar { border-color: var(--tk-teal); }
.tkc-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.tkc-avatar-initials { font-size: 11px; font-weight: 600; color: var(--tk-ink-soft, #4A5560); }

/* who is answering — the salesperson chip in the chat header */
.tkc-agent { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tkc-agent .tkc-avatar { width: 22px; height: 22px; margin-block-start: 0; }
.tkc-agent-name {
  font-size: 12.5px; color: var(--tk-ink-soft, #4A5560);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}

/* typing indicator — three slate dots pulsing on the spring curve */
.tkc-typing { display: inline-flex; align-items: center; gap: 5px; padding: 5px 2px; }
.tkc-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tk-slate-muted); opacity: .45;
  animation: tkc-think 1.05s var(--tk-spring) infinite;
}
.tkc-typing span:nth-child(2) { animation-delay: .14s; }
.tkc-typing span:nth-child(3) { animation-delay: .28s; }
@keyframes tkc-think {
  0%, 55%, 100% { transform: translateY(0); opacity: .45; }
  25% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tkc-typing span { animation: none; opacity: .6; } }

/* HH:MM under the last bubble of a cluster + day separator chips */
.tkc-time {
  font-size: 11px; line-height: 16px; color: var(--tk-slate-muted);
  font-variant-numeric: tabular-nums; margin-block-start: -8px;
}
.tkc-time-assistant, .tkc-time-agent { align-self: flex-start; padding-inline-start: 40px; }
.tkc-time-user { align-self: flex-end; padding-inline-end: 6px; }
.tkc-day {
  align-self: center; font-size: 11.5px; font-weight: 600;
  color: var(--tk-slate-muted); background: var(--tk-surface-alt);
  border-radius: var(--tk-radius-pill); padding: 2px 12px; margin-block: 2px;
  font-variant-numeric: tabular-nums;
}

/* resume divider — the join point when a previous conversation restores */
.tkc-resume {
  display: flex; align-items: center; gap: 10px; align-self: stretch;
  color: var(--tk-slate-muted); font-size: 12px; margin-block: 2px;
}
.tkc-resume::before, .tkc-resume::after { content: ''; flex: 1; height: 1px; background: var(--tk-line); }
/* The way out of a conversation that is not yours (v1.39) — on the divider
   itself, where somebody who did not expect to find one is looking. */
.tkc-resume .tk-link-btn { flex: none; font-size: 12px; white-space: nowrap; }

/* header sound toggle — speaker; the slash shows only when muted */
.tkc-header-tool {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 0; background: none; color: var(--tk-slate-muted);
  display: grid; place-items: center; cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.tkc-header-tool:hover { color: var(--tk-slate); background: var(--tk-surface-alt); }
#tkc-sound[aria-pressed="true"] .tkc-snd-x { display: none; }
#tkc-sound[aria-pressed="false"] .tkc-snd-waves { display: none; }
#tkc-sound[aria-pressed="false"] { color: var(--tk-clay); }

/* drag-over — amber ring on the log (amber as fill/ring, never text) */
.tkc-log.is-dropping { box-shadow: inset 0 0 0 3px var(--tk-amber-fill, #C9A34E); }
.tkc-drop-hint {
  position: absolute; inset-inline: 0; top: 45%; margin-inline: auto;
  width: max-content; max-width: 85%;
  background: var(--tk-slate); color: var(--tk-surface);
  font-size: 13px; font-weight: 600; padding: 8px 18px;
  border-radius: var(--tk-radius-pill); box-shadow: var(--tk-shadow-2);
  pointer-events: none; z-index: 7;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .2s var(--tk-glide), transform .3s var(--tk-spring), visibility 0s linear .2s;
}
.tkc-drop-hint.is-show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* new-messages jump pill, floating above the composer */
.tkc-jump {
  position: absolute; inset-inline: 0; margin-inline: auto; width: max-content;
  inset-block-end: calc(86px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tk-slate); color: var(--tk-surface); border: 0;
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px;
  border-radius: var(--tk-radius-pill); box-shadow: var(--tk-shadow-2);
  cursor: pointer; z-index: 6;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--tk-glide), transform .35s var(--tk-spring), visibility 0s linear .25s;
}
.tkc-jump.is-show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tkc-jump-ic { display: inline-flex; }

/* the input pill hosts the emoji button at its trailing edge */
.tkc-field { flex: 1; position: relative; display: flex; min-width: 0; }
/* The emoji button sits inside the pill, so the input reserves room for
   it. That reservation cannot be written with logical properties here:
   the input carries dir="auto" so a person's own language aligns as they
   type, and an EMPTY auto field resolves to LTR — which put the reserved
   space on the right while the button, following the panel, sat on the
   left. They ended up on opposite sides and the button covered the
   placeholder. The room is reserved on the side the BUTTON is on, which
   is the panel's inline-end, so it is stated physically per direction. */
.tkc-field input { min-width: 0; }
html[dir="rtl"] .tkc-field input { padding-left: 44px; padding-right: 16px; }
html:not([dir="rtl"]) .tkc-field input { padding-right: 44px; padding-left: 16px; }
.tkc-emoji-inline {
  position: absolute; inset-inline-end: 6px; inset-block-start: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: none; color: var(--tk-slate-muted);
  display: grid; place-items: center; cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.tkc-emoji-inline:hover { color: var(--tk-slate); }
.tkc-emoji-inline.is-live { color: var(--tk-slate); background: var(--tk-surface-alt); }

/* emoji picker popover — logical positions mirror cleanly in RTL/LTR */
.tkc-emoji-pop {
  position: absolute; inset-inline-start: 12px;
  inset-block-end: calc(86px + env(safe-area-inset-bottom, 0px));
  width: min(312px, calc(100% - 24px));
  background: var(--tk-surface-raised); border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-card); box-shadow: var(--tk-shadow-2);
  padding: 8px; z-index: 7;
  display: none; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.tkc-emoji-pop.is-open { display: grid; animation: tkc-pop .3s var(--tk-spring); }
@keyframes tkc-pop {
  from { transform: translateY(6px) scale(.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.tkc-emoji-item {
  border: 0; background: none; font: inherit; font-size: 19px; line-height: 1;
  padding: 7px 0; border-radius: 8px; cursor: pointer;
}
.tkc-emoji-item:hover { background: var(--tk-surface-alt); }
@media (prefers-reduced-motion: reduce) {
  .tkc-jump, .tkc-drop-hint { transition: opacity .2s ease, visibility 0s linear .2s; transform: none; }
  .tkc-emoji-pop.is-open { animation: none; }
}

/* ── v1.20 — accessibility ────────────────────────────────────────────────
   The shared legal footer (partials/legal-footer). Every consumer surface
   must reach the accessibility statement; pages that previously ended
   without a footer now end with this one. */
.tkc-legal-footer {
  max-width: 1400px;
  margin: var(--tk-space-5) auto 0;
  padding: 18px var(--tk-space-4) 30px;
  border-block-start: 1px solid var(--tk-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 18px; flex-wrap: wrap;
}
.tkc-legal-footer nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 1.4.11 Non-text contrast — the composer's own input rule predates the
   token and paints --tk-line (1.34:1 on the page): the field's only
   boundary. The composer is where every visitor types, so it gets the
   control border like every other field. */
.tkc-composer input { border-color: var(--tk-control-border); }
/* 2.4.7 — and the ring that survives both the light page and the dark
   drawer, instead of the old teal one (2.35:1 on slate). */
.tkc-composer input:focus-visible { outline: 3px solid var(--tk-focus); outline-offset: 2px; }
/* the inventory one small change away (v1.28) */
.tkc-near { margin-block-start: var(--tk-space-6, 32px); }
.tkc-near-title { font-size: 20px; font-weight: 700; }
.tkc-near-sub { font-size: 13.5px; color: var(--tk-slate-muted); margin-block-start: 4px; }
.tkc-near-row { margin-block-start: 12px; padding: var(--tk-space-4); }
.tkc-near-head { font-weight: 700; }
.tkc-near-list { margin: 10px 0 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.7; }
.tkc-near-apply { margin-block-start: 12px; display: inline-flex; min-height: var(--tk-touch-min); align-items: center; }

/* ── Phones (v1.86) ───────────────────────────────────────────────────── */
/* A project's or company's chat door: four stat boxes in one row left
   each 55px of room on a phone, and "₪1.98M+" and a delivery range ran
   out through their borders. Two by two instead (the area band, which
   has to stay one compact row over its photograph, keeps its own). */
@media (max-width: 480px) {
  .tkc-hero:not([data-bg]) .tkc-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tkc-hero:not([data-bg]) .tkc-hero-stat { min-width: 0; }
  .tkc-hero:not([data-bg]) .tkc-hero-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* The composer on a narrow phone: once a conversation exists the attach
   and mic buttons join the send button, three 48px circles that left the
   field 102–134px on a 360px screen — less than its own placeholder.
   Below 400px the circles are the 44px touch minimum and the row is
   tighter, which gives the field ~25px back. */
@media (max-width: 400px) {
  .tkc-composer { gap: 6px; padding-inline: 10px; }
  .tkc-composer .tkc-tool,
  .tkc-composer .tkc-send { min-width: var(--tk-touch-min); min-height: var(--tk-touch-min); }
  .tkc-composer input { min-height: var(--tk-touch-min); }
}