/**
 * Lobby surfaces — the marketing lobby (platform + branded) and the
 * console's portfolio lobby. Tokens only; no new colours are introduced.
 *
 * Merge target: append the .tkl-* and .tkc-embed-* blocks to
 * public/assets/css/consumer.css, and the .tkxl-* block to console.css.
 * Kept in one file here so the diff is reviewable in isolation.
 */

/* ── the embedded bot (partials/bot-chat) ─────────────────────────────── */
.tkc-embed {
  /* relative: the new-messages pill, the drop hint and the emoji picker
     are placed inside the panel (requirement 18) */
  position: relative;
  display: flex; flex-direction: column; min-height: 0;
  height: var(--tkc-embed-h, 600px);
  background: var(--tk-surface-raised);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-card);
  box-shadow: var(--tk-shadow-1);
  overflow: hidden;
}
.tkc-embed-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-block-end: 1px solid var(--tk-line);
  background: var(--tk-surface-raised); flex: none;
}
.tkc-embed-head .tk-logo { flex: none; }
.tkc-embed-note {
  padding: 8px 14px; border-block-end: 1px solid var(--tk-line);
  background: var(--tk-surface); flex: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tkc-embed-scopes {
  display: flex; flex-wrap: wrap; gap: 6px; flex: none;
  padding: 10px 14px; border-block-end: 1px solid var(--tk-line);
  background: var(--tk-surface);
}
.tkc-embed-scope { min-height: 30px; padding: 3px 12px; font-size: 13px; border-bottom: 0; }
.tkc-embed-log { flex: 1; overflow-y: auto; padding: 14px; background: var(--tk-surface); }
/* nothing inside a scrolling log may shrink — the log scrolls instead */
.tkc-embed-log > * { flex: none; }
.tkc-embed-disclosure { margin-block-end: 2px; }

/* the property card, in the conversation */
.tkc-unit-card { background: var(--tk-surface-raised); border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); overflow: hidden; align-self: flex-start; max-width: 88%; }
.tkc-unit-card-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.tkc-unit-card-body img { width: 96px; height: 88px; object-fit: cover; display: block; }
.tkc-unit-card-text { padding: 10px 14px; min-width: 0; }
.tkc-unit-card-cta { display: block; width: 100%; text-align: start; border: 0; border-block-start: 1px solid var(--tk-line); background: none; padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tk-amber-text); cursor: pointer; }

/* ── marketing lobby ─────────────────────────────────────────────────── */
.tkl { max-width: 1400px; margin: 0 auto; padding: 0 var(--tk-space-4); }
.tkl-brandbar { background: var(--tk-slate); color: var(--tk-surface); }
.tkl-brandbar-inner { max-width: 1400px; margin: 0 auto; padding: 0 var(--tk-space-4); min-height: 58px; display: flex; align-items: center; gap: var(--tk-space-4); flex-wrap: wrap; }
.tkl-brandbar .tk-wordmark { color: inherit; }
.tkl-intent { background: var(--tk-slate); color: var(--tk-surface); }
.tkl-intent-inner { max-width: 1400px; margin: 0 auto; padding: var(--tk-space-5) var(--tk-space-4); }
.tkl-title { font-size: 34px; line-height: 42px; font-weight: 300; font-family: var(--tk-font-he); letter-spacing: .01em; margin: 0 0 var(--tk-space-2); }
.tkl-lead { font-size: 16px; line-height: 26px; color: #B9C6CE; max-width: 720px; margin: 0 0 var(--tk-space-5); }
.tkl-facets { display: grid; gap: var(--tk-space-3); }
.tkl-facet { display: flex; align-items: center; gap: var(--tk-space-2); flex-wrap: wrap; }
.tkl-facet-label { font-size: 12.5px; color: #8E9AA4; inline-size: 56px; flex: none; }
.tkl-facet .tk-chip { background: rgba(247,245,241,.10); color: #EDE8E0; border-color: rgba(247,245,241,.45); border-bottom: 0; }  /* v1.20 a11y: .26 gave 2.24:1 on slate, .45 gives 3.92:1 */
.tkl-facet .tk-chip[data-selected="true"] { background: var(--tk-amber-fill); color: var(--tk-slate); border-color: var(--tk-amber-fill); }
.tkl-body { display: grid; gap: var(--tk-space-4); padding-block: var(--tk-space-4) var(--tk-space-8); align-items: start; }
@media (min-width: 1100px) { .tkl-body { grid-template-columns: minmax(0, 1fr) 420px; } .tkl-side { position: sticky; top: var(--tk-space-4); } }
.tkl-side { display: grid; gap: var(--tk-space-4); }
.tkl-resulthead { display: flex; align-items: center; gap: var(--tk-space-3); flex-wrap: wrap; margin-block-end: var(--tk-space-3); }
.tkl-sorts { display: flex; gap: 6px; margin-inline-start: auto; }
.tkl-grid { display: grid; gap: var(--tk-space-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tkl-card { display: block; overflow: hidden; text-decoration: none; color: inherit; border-bottom: 0; }
.tkl-card-photo { position: relative; height: 176px; background: var(--tk-surface-alt); background-size: cover; background-position: center; }
.tkl-card-photo span { position: absolute; inset-block-start: 10px; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: var(--tk-radius-input); }
.tkl-card-badge { inset-inline-start: 10px; background: rgba(27,42,54,.86); color: var(--tk-surface); }
.tkl-card-area { inset-inline-end: 10px; background: rgba(247,245,241,.94); color: var(--tk-slate); }
.tkl-card-body { padding: 15px 17px 16px; }
.tkl-card-stats { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding-block-end: 13px; border-block-end: 1px solid var(--tk-line); }
.tkl-card-stats b { display: block; font-size: 15.5px; white-space: nowrap; }
/* A delivery range ("09.2028–03.2029") is wider than its third of a
   two-column card and ran over the rooms beside it: it breaks after the
   dash instead. */
.tkl-card-stats [data-card-delivery] b { white-space: normal; }
.tkl-card-foot { display: flex; align-items: center; gap: 10px; margin-block-start: 12px; }
.tkl-card-foot .tk-link-btn { margin-inline-start: auto; }
.tkl-map { overflow: hidden; }
.tkl-map iframe, .tkl-map img { width: 100%; height: 260px; border: 0; display: block; }
.tkl-map-note { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-block-start: 1px solid var(--tk-line); }
/* A lobby's layout (requirement 04): its projects as a list, one per row
   with the picture at the side; and its chat above the projects, the
   first thing a visitor sees, on a phone too. */
.tkl-grid[data-layout="list"] { grid-template-columns: minmax(0, 1fr); }
.tkl-grid[data-layout="list"] .tkl-card { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: stretch; }
.tkl-grid[data-layout="list"] .tkl-card-photo { height: 100%; min-height: 150px; }
@media (max-width: 720px) { .tkl-grid[data-layout="list"] .tkl-card { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); } .tkl-grid[data-layout="list"] .tkl-card-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tkl-chat-top { padding-block-start: var(--tk-space-4); }
@media (min-width: 1100px) { .tkl-body[data-no-side] { grid-template-columns: minmax(0, 1fr); } }
.tkl-chat-top .tkc-embed { height: min(var(--tkc-embed-h, 460px), calc(100dvh - 120px)); }
/* The apartments strip on a developer's lobby (requirement 08). */
.tkl-units { margin-block-start: var(--tk-space-5); }
.tkl-promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tk-space-5); padding: 20px 22px; margin-block-start: var(--tk-space-4); }

/* ── console portfolio lobby ─────────────────────────────────────────── */
.tkxl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-block-end: 20px; }
.tkxl-kpi { padding: 16px 18px; }
.tkxl-kpi b { display: block; font-size: 25px; line-height: 1; font-weight: 700; direction: ltr; text-align: end; font-variant-numeric: tabular-nums; }
.tkxl-kpi-dark { background: var(--tk-slate); border-color: var(--tk-slate); }
.tkxl-kpi-dark b { color: var(--tk-amber-fill); }
.tkxl-kpi-dark span { color: #B9C6CE; }
.tkxl-body { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1280px) { .tkxl-body { grid-template-columns: minmax(0, 1fr) 384px; } }
.tkxl-project { display: grid; grid-template-columns: 208px minmax(0, 1fr); overflow: hidden; }
@media (max-width: 900px) { .tkxl-project { grid-template-columns: 1fr; } }
.tkxl-project-photo { position: relative; min-height: 188px; background: var(--tk-surface-alt); background-size: cover; background-position: center; }
.tkxl-project-body { padding: 17px 20px; min-width: 0; }
.tkxl-project-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 15px 0 14px; }
.tkxl-project-stats b { display: block; font-size: 16px; font-weight: 700; }
.tkxl-bar { height: 6px; border-radius: var(--tk-radius-pill); background: var(--tk-surface-alt); overflow: hidden; }
.tkxl-bar > div { height: 100%; background: var(--tk-amber-fill); }
.tkxl-flags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tkxl-flags .tk-btn { margin-inline-start: auto; }
.tkxl-alert { display: grid; grid-template-columns: 8px minmax(0, 1fr) 140px 100px; align-items: center; gap: 14px; padding: 0 20px; min-height: 52px; border-block-end: 1px solid var(--tk-line); }
.tkxl-alert-dot { width: 8px; height: 8px; border-radius: var(--tk-radius-pill); }
.tkxl-pace { display: grid; grid-template-columns: 96px minmax(0, 1fr) 26px; gap: 10px; align-items: center; margin-block-end: 9px; }
.tkxl-pace-track { height: 6px; border-radius: var(--tk-radius-pill); background: var(--tk-surface-alt); overflow: hidden; }
.tkxl-pace-track > div { height: 100%; background: var(--tk-teal); }

/* ── v1.20 — the lobby wears a brand, and reads right when stock is thin ── */
.tkl-topnav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-inline-start: auto; }
.tkl-topnav a, .tkl-topnav .tk-link-btn { color: #E7EDF1; }
.tkl-topnav .tk-muted { color: #8FA3AE; }
.tkl-strip { color: #C7D6CE; }
.tkl-brandtag { color: #C7D6CE; }
.tkl-brandlogo { height: 30px; width: auto; display: block; }
.tkl-powered { display: inline-flex; align-items: center; gap: 6px; color: #C7D6CE; text-decoration: none; border-bottom: 0; }
.tkl-powered:hover { color: var(--tk-surface); }
.tkl-brandbar .tk-logo { display: block; border-bottom: 0; }

/* A cover-less project keeps the brand's texture instead of a grey hole. */
.tkl-card-photo-empty { background-image: repeating-linear-gradient(45deg, #22333F, #22333F 14px, #1B2A36 14px, #1B2A36 28px); }

/* One or two projects must not leave two empty grid tracks: the cards go
   wide (photo beside the body) and fill the row honestly. */
.tkl-grid[data-sparse] { grid-template-columns: minmax(0, 1fr); }
.tkl-grid[data-sparse] .tkl-card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: stretch; }
.tkl-grid[data-sparse] .tkl-card-photo { height: 100%; min-height: 196px; }
@media (max-width: 720px) { .tkl-grid[data-sparse] .tkl-card { grid-template-columns: 1fr; } .tkl-grid[data-sparse] .tkl-card-photo { min-height: 176px; } }

.tkl-footer { max-width: 1400px; margin: var(--tk-space-5) auto 0; padding: 20px var(--tk-space-4) 34px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-block-start: 1px solid var(--tk-line); }

/* ── v1.20 — console lobby: no grey holes, no cramped composer ─────────── */
.tkxl-project-photo { min-height: 176px; }
/* A project with no photo yet: sand, not near-black. The old slate weave
   filled a third of every card with what read as a failed image. */
.tkxl-project-photo-empty {
  background-color: var(--tk-surface-alt);
  background-image: repeating-linear-gradient(45deg, rgba(27,42,54,.05), rgba(27,42,54,.05) 12px, transparent 12px, transparent 24px);
  display: grid; place-items: center;
}
.tkxl-project-initial { font-family: var(--tk-font-display, inherit); font-size: 46px; font-weight: 700; color: rgba(27, 42, 54, .3); line-height: 1; }
.tkxl-project-blank { color: var(--tk-slate-muted); margin-block: 10px 14px; max-width: 52ch; }
@media (min-width: 901px) { .tkxl-project { grid-template-columns: 176px minmax(0, 1fr); } }

/* ── v1.21 — the embedded bot in a 384px rail ──────────────────────────
   It was three broken rows: a header whose pill wrapped and pushed the
   controls out of line, a scope row that wrapped to three lines, and a
   composer that broke into tools / field / send stacked on top of each
   other. All three are the same mistake — letting a narrow panel wrap
   what should scroll or shrink. */

/* Header: one row, and the pill is what gives way. */
.tkc-embed-head { align-items: center; min-height: 44px; }
.tkc-embed-head .tkc-header-project { max-width: none; flex: 0 1 auto; }
.tkc-embed-head .tkc-human-link { margin-inline-start: auto; }
/* A phone-wide panel: the page already shows the logo, and with it the
   head ran out of room and cut "talk to a person" off (requirement 13). */
@media (max-width: 420px) { .tkc-embed-head .tk-logo { display: none; } }

/* Scopes: one row that scrolls, never a stack of rows. */
.tkc-embed-scopes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tkc-embed-scopes::-webkit-scrollbar { display: none; }
.tkc-embed-scope { flex: none; }

/* Composer: one row. The field is the only thing that flexes. */
.tkc-embed ~ * .tkc-composer,
.tkxl-body .tkc-composer { flex-wrap: nowrap; }
.tkxl-body .tkc-field { flex: 1 1 auto; min-width: 0; order: 0; }

/* The developer's (or the project's own) mark, on the photo where it
   reads as a signature rather than as another badge competing with the
   stock count. */
.tkl-card-photo .tkl-card-mark {
  inset-block-start: auto; inset-block-end: 10px; inset-inline-start: 10px; z-index: 1;
  padding: 0; background: none; border-radius: 0; font-weight: 400;
}

/* ── requirement 18 — the platform chat starts from a place, and every
   control stays within reach ───────────────────────────────────────────── */

/* A place's chat keeps the way to the place: its page and its map. */
.tkc-embed-links {
  display: flex; flex-wrap: wrap; gap: 2px 14px; flex: none;
  padding: 6px 14px; border-block-end: 1px solid var(--tk-line);
  background: var(--tk-surface);
}
.tkc-embed-links .tk-link-btn { font-size: 13px; }
/* The answers to the opener's question, then the questions to ask it. */
.tkc-seed-also { margin-block: 8px 2px; }

/* A row that scrolls sideways says so: the edge it can scroll towards
   fades (scroll-rows.js sets data-more-start / data-more-end). */
[data-scroll-row] { --tk-fade-s: 0px; --tk-fade-e: 0px; }
[data-scroll-row][data-more-start] { --tk-fade-s: 28px; }
[data-scroll-row][data-more-end] { --tk-fade-e: 28px; }
[data-scroll-row][data-more-start],
[data-scroll-row][data-more-end] {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--tk-fade-s), #000 calc(100% - var(--tk-fade-e)), transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 var(--tk-fade-s), #000 calc(100% - var(--tk-fade-e)), transparent 100%);
}
html:not([dir="rtl"]) [data-scroll-row][data-more-start],
html:not([dir="rtl"]) [data-scroll-row][data-more-end] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tk-fade-s), #000 calc(100% - var(--tk-fade-e)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--tk-fade-s), #000 calc(100% - var(--tk-fade-e)), transparent 100%);
}

/* The facets: chips wrap beside their label on a wide screen; on a phone
   each facet is one row that scrolls, not a stack of rows pushing the
   chat and the cards down. min-width 0 all the way down: a grid or flex
   item is otherwise as wide as its widest unbreakable content, and a
   row of chips that will not wrap then widens the page instead of
   scrolling (the 390 px lobby scrolled sideways by 104 px). */
.tkl-facet { min-width: 0; }
.tkl-facet-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tk-space-2); flex: 1 1 auto; min-width: 0; }
@media (max-width: 1099.98px) { .tkl-body { grid-template-columns: minmax(0, 1fr); } }
.tkl-body > *, .tkl-side > *, .tkc-embed, .tkc-embed > * { min-width: 0; }
.tkl-side { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  .tkl-facet { flex-wrap: nowrap; }
  .tkl-facet-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
  .tkl-facet-chips::-webkit-scrollbar { display: none; }
  .tkl-facet-chips > .tk-chip { flex: none; }
}

/* The platform lobby's chat comes first in the page: beside the cards
   on a desktop, right after the search on a phone, and in both it leads
   the column, with the map under it. */
@media (min-width: 1100px) {
  .tkl-body[data-chat-first] > .tkl-side { grid-column: 2; grid-row: 1; }
  .tkl-body[data-chat-first] > .tkl-results { grid-column: 1; grid-row: 1; }
}
.tkl-body[data-chat-first] > .tkl-side > .tkl-chat { order: -1; }
@media (max-width: 1099.98px) {
  .tkl-body[data-chat-first] .tkl-chat > .tkc-embed { height: min(480px, calc(100dvh - 120px)); min-height: 360px; }
}

/* The way to a company lobby's chat from the top on a phone. */
.tkl-jump-chat { font-size: 13.5px; }
@media (min-width: 1100px) { .tkl-jump-chat { display: none; } }
.tkl-chat:focus, .tkl-map:focus { outline: none; }

/* The side column held in view beside the cards is never taller than the
   window: the map gives way first, then the chat down to a usable
   height, so the composer is always on screen. A window too short for
   both lets the column scroll with the page instead. */
@media (min-width: 1100px) {
  .tkl-side { max-height: calc(100dvh - 2 * var(--tk-space-4)); display: flex; flex-direction: column; }
  .tkl-side > .tkl-map { flex: none; }
  .tkl-side .tkl-map iframe, .tkl-side .tkl-map img { height: clamp(120px, 26dvh, 260px); }
  .tkl-side > .tkl-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .tkl-side > .tkl-chat > .tkc-embed { flex: 1 1 auto; height: auto; min-height: 340px; max-height: var(--tkc-embed-h, 604px); }
}
@media (min-width: 1100px) and (max-height: 620px) {
  .tkl-side { position: static; max-height: none; }
  .tkl-side > .tkl-chat > .tkc-embed { height: var(--tkc-embed-h, 604px); max-height: none; }
}

/* ── Phones (v1.86) ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* The console lobby's four figures had 72px each: a price range ran
     15px into the figure beside it. Two by two. */
  .tkxl-project-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* "What needs attention": two fixed columns (140px + 100px) squeezed the
     sentence itself to a few letters. The project goes under the
     sentence, and the action stays at the row's end. */
  .tkxl-alert { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 2px 12px; padding-block: 10px; }
  .tkxl-alert > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .tkxl-alert > :nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
}

/* The company's mark in the hero, opposite the text (v1.95).
   A grid rather than a float so the logo cannot overlap the filters at
   any width, and it drops below the text on a phone instead of
   squeezing the title into two words a line. */
.tkl-intent-marked { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tk-space-4); align-items: start; }
.tkl-hero-mark { grid-column: 2; grid-row: 1 / span 3; block-size: 72px; inline-size: auto; max-inline-size: 190px;
  object-fit: contain; background: rgba(255,255,255,.95); border-radius: 10px; padding: 8px 12px; align-self: start; }
@media (max-width: 760px) {
  .tkl-intent-marked { grid-template-columns: minmax(0, 1fr); }
  .tkl-hero-mark { grid-column: 1; grid-row: auto; order: -1; block-size: 52px; justify-self: start; }
}

/* Filters in place (v1.100.0): what is being replaced dims while it loads. */
html[data-lobby-loading] .tkl-results, html[data-lobby-loading] #tkl-map { opacity: .55; transition: opacity .15s ease; }
html[data-lobby-loading] .tkl-facets { cursor: progress; }