/* Currency form, "Chat" way of answering: the window around the SAME live
   form (service-form.js is untouched; the chat drives it through its DOM).
   Ported from the chat-ticket mockup (chatform.css + chatlook.css + the
   choice tiles from skin.css) with the plan's rename table applied.
   Site tokens only (styles.css :root). Desktop: conversation left, service
   ticket right. Phone: full screen, ticket as a slim row under the head.
   Class rules: the chat's own classes keep the cw- prefix; the window and
   the choice use svc-chat-* / svc-how*. The head is a div, never header. */

/* ===================== Part 1: the window (chatform.css) ===================== */
html.svc-chat-open { overflow: hidden; scrollbar-gutter: stable; }
/* One track of minmax(0, 1fr), not auto: an auto track grows to the content's max-content
   width (the nowrap header line), and the window's 100% would then be wider than a phone. */
.svc-chat { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; }
.svc-chat[hidden] { display: none !important; }
.svc-chat-back { position: absolute; inset: 0; background: rgba(18, 23, 42, .45); backdrop-filter: blur(3px); }
.svc-chat-win {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(64rem, calc(100% - 2rem)); height: min(50rem, calc(100dvh - 3rem)); overflow: hidden;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 1.5rem 4rem rgba(17, 24, 39, .3);
  --svc-red: #c62828; --svc-orange: #b45309; --svc-green: #2e7d32;
}

/* Head (a div: service-form.js measures document.querySelector('header')) */
.cw-head { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.cw-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--navy); color: var(--white); font: 700 1rem/1 var(--head); box-shadow: 0 0 0 3px rgba(55, 189, 242, .25); }
.cw-who { flex: 1; min-width: 0; }
.cw-title { margin: 0; font: 700 1rem/1.2 var(--head); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-sub { margin: .15rem 0 0; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; white-space: nowrap; overflow: hidden; }
.cw-sub i { display: none; }
.cw-steps { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: .5rem .9rem; min-height: 2.75rem; font: 600 .85rem/1 var(--head); color: var(--navy); cursor: pointer; }
.cw-steps:hover { border-color: var(--cyan); }
.cw-close { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.cw-close:hover { background: var(--soft); color: var(--navy); }

/* Conversation: answered steps above, the live form's current step at the foot */
.cw-body { grid-column: 1; grid-row: 2; overflow-y: auto; padding: 1.1rem 1.25rem 1.5rem; scroll-behavior: smooth; }
.cw-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.cw-turn { display: grid; gap: .45rem; }
.cw-q, .cw-live .svc-step-title { position: relative; margin: 0; padding-left: 2rem; font: 600 1rem/1.4 var(--head); color: var(--text); }
.cw-q::before, .cw-live .svc-step-title::before { content: ""; position: absolute; left: .2rem; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--cyan) 0 40%, var(--cyan-dark) 41%); box-shadow: 0 0 0 4px rgba(55, 189, 242, .14); }
.cw-q { color: var(--muted); font-weight: 600; }
.cw-a { margin: 0; display: flex; justify-content: flex-end; }
.cw-a span { max-width: 85%; background: var(--navy); color: var(--white); border-radius: 1.1rem 1.1rem .35rem 1.1rem; padding: .55rem .95rem; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.cw-live { margin-top: 1.1rem; }

/* The live form, dressed as the chat's latest message (its own markup and logic) */
.svc-form.in-chat { max-width: none; }
.svc-form.in-chat .svc-sticky { position: static; }
.svc-form.in-chat .svc-progress { display: none; }
.svc-form.in-chat .svc-step { padding: 0; animation: none; }
.svc-form.in-chat .svc-step > *:not(.svc-step-title):not(.svc-nav) { margin-left: 2rem; }
.svc-form.in-chat .svc-step-title { margin-bottom: .8rem; font-size: 1.05rem; color: var(--text); }
.svc-form.in-chat .svc-tiles { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .55rem; }
.svc-form.in-chat .svc-tile { min-height: 4.2rem; padding: .7rem .6rem; }
.svc-form.in-chat .svc-tiles-clients .svc-tile-client img { height: 3rem; }
.svc-form.in-chat .svc-nav { margin-left: 2rem; }
.svc-form.in-chat [data-nav="back"] { min-height: 2.6rem; padding: .5rem 1rem; border-radius: 999px; font: 600 .9rem/1 var(--font); }   /* Margaret looked for Back first */
.svc-form.in-chat .svc-status:not(:empty) { margin-left: 2rem; }

/* Service ticket (the docket): beside the chat. --lvl is set inline by the JS. */
.cw-ticket { grid-column: 2; grid-row: 2 / 4; position: relative; margin: 1rem 1rem 1rem 0; align-self: start; max-height: calc(100% - 2rem); overflow-y: auto;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); border-left: 6px solid var(--lvl, var(--line)); transition: border-color 500ms; }
.svc-chat-win::after { content: ""; grid-column: 2; grid-row: 2 / 4; background: var(--soft); border-left: 1px solid var(--line); z-index: -1; }
.svc-chat-win { isolation: isolate; }
.cw-ticket-head { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 1rem 1.1rem .8rem; border-bottom: 2px dashed var(--line);
  font: 600 .72rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cw-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--lvl, var(--line)); }
.cw-ticket-rows { margin: 0; padding: .8rem 1.1rem .4rem; }
.cw-trow { display: grid; grid-template-columns: 5.2rem 1fr; gap: .5rem; padding: .3rem 0; }
.cw-trow dt { font: 600 .66rem/1.9 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cw-trow dd { margin: 0; }
.cw-tedit { border: 0; background: none; padding: 0; text-align: left; font: 600 .92rem/1.35 var(--head); color: var(--text); cursor: pointer; overflow-wrap: anywhere; border-bottom: 1px dashed transparent; }
.cw-tedit:hover { color: var(--blue); border-bottom-color: var(--cyan); }
.cw-ticket-empty { margin: 0; padding: .8rem 1.1rem; color: var(--muted); font-size: .88rem; }
.cw-ticket-empty[hidden] { display: none; }
.cw-jobno { display: flex; align-items: baseline; gap: .6rem; margin: 0; padding: .4rem 1.1rem 1.1rem; }
.cw-jobno span { font: 600 .66rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cw-jobno i { flex: 1; border-bottom: 2px dotted var(--line); }
.cw-jobno.stamped strong { display: inline-block; padding: .4rem .7rem; border: 2px solid var(--navy); border-radius: .6rem; font: 400 1.1rem/1 "Ethnocentric", var(--head); color: var(--navy); transform: rotate(-2deg); }

/* Phone: whole screen, ticket as a slim row under the head */
@media (max-width: 52rem) {
  .svc-chat-win { width: 100%; height: 100dvh; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .cw-composer { grid-row: 4; }
  .svc-chat-win::after { display: none; }
  .cw-ticket { grid-column: 1; grid-row: 2; margin: 0; max-height: none; border-radius: 0; box-shadow: none; border-left-width: 5px; border-bottom: 1px solid var(--line); background: var(--soft); }
  .cw-ticket-head { padding: .55rem 1rem .35rem; border-bottom: 0; }
  .cw-ticket-rows { display: flex; gap: .4rem; overflow-x: auto; padding: 0 1rem .6rem; }
  .cw-trow { display: block; padding: 0; flex: none; }
  .cw-trow dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cw-tedit { display: inline-block; max-width: 14rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: .82rem; }
  .cw-ticket-empty { padding: 0 1rem .6rem; font-size: .8rem; }
  .cw-jobno { display: none; }
  .cw-jobno.stamped { display: flex; padding: 0 1rem .6rem; }
  .cw-body { grid-row: 3; padding: 1rem 1rem 1.5rem; }
  .cw-head { gap: .55rem; padding: .7rem .6rem .7rem .9rem; }
  /* The small line kept the row wide and clipped the desk name to "WaTo service d…" at 390 px:
     drop it here (the client's name is on the ticket) and let the name wrap instead. */
  .cw-sub { display: none; }
  .cw-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .cw-steps { padding: .5rem .7rem; font-size: .8rem; }
  .svc-form.in-chat .svc-step > *:not(.svc-step-title):not(.svc-nav), .svc-form.in-chat .svc-nav { margin-left: 0; }
  .svc-form.in-chat .svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .cw-body { scroll-behavior: auto; } }

/* The box at the bottom */
.cw-composer { grid-column: 1; grid-row: 3; margin: 0; padding: .55rem 1.25rem .9rem; border-top: 1px solid var(--line); background: var(--white); }
.cw-hint { margin: 0 0 .4rem; min-height: 1.1em; font-size: .78rem; color: var(--muted); }
.cw-hint-warn { color: #9a4507; font-weight: 600; }
.cw-row { display: flex; gap: .5rem; }
.cw-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: .75rem 1.1rem; font: inherit; }
.cw-row input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(55, 189, 242, .18); }
.cw-send { flex: none; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; cursor: pointer; }
/* Number on each choice, so "2" + Enter picks it */
.svc-form.in-chat .svc-tile, .svc-form.in-chat .svc-alt button, .svc-form.in-chat .svc-link { position: relative; }
.cw-num { position: absolute; top: .35rem; left: .4rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 999px; background: var(--soft-2); color: var(--navy);
  font: 700 .72rem/1.35rem var(--head); text-align: center; pointer-events: none; }
.svc-form.in-chat .svc-alt button .cw-num, .svc-form.in-chat .svc-link .cw-num { position: static; display: inline-block; margin-right: .4rem; }
.svc-form.in-chat [aria-pressed="true"] .cw-num { background: var(--blue); color: var(--white); }
@media (max-width: 52rem) { .cw-composer { padding: .5rem 1rem .8rem; } }
/* Phone: the box gets its own row under the conversation (after the base rule above) */
@media (max-width: 52rem) { .cw-composer { grid-row: 4; } }
/* Screen-reader-only text inside the window */
.cw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Room above each tile's words for its number */
.svc-form.in-chat .svc-tile { padding-top: 1.55rem; }
.svc-form.in-chat .svc-yesno .svc-tile { min-width: 3.4rem; }

/* ===================== Part 2: the chat look (chatlook.css) ===================== */
/* Makes the SAME live form read like a chat: the desk's lines are plain text
   under a small label, choices are pills, answers are dark bubbles on the
   right, write-in boxes are answered from the chat box. Styling only. */

/* ---- The desk's messages ---- */
.cw-q, .svc-form.in-chat .svc-step-title { padding-left: 0; font: 500 1rem/1.45 var(--font); color: var(--text); margin: 0; }
.cw-q::before, .svc-form.in-chat .svc-step-title::before {
  content: var(--cw-desk, "WaTo service desk"); position: static; display: block; width: auto; height: auto; margin: 0 0 .25rem; background: none; box-shadow: none; border-radius: 0;
  font: 600 .62rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.cw-q { color: var(--text); }
.svc-form.in-chat .svc-step-title { margin-bottom: .7rem; }
.svc-form.in-chat .svc-step > *:not(.svc-step-title):not(.svc-nav), .svc-form.in-chat .svc-nav { margin-left: 0; }
.svc-form.in-chat .svc-help, .svc-form.in-chat .svc-intro { font-size: .9rem; color: var(--muted); margin: -.35rem 0 .7rem; }
.svc-form.in-chat .svc-q { margin: 1rem 0 .5rem; font: 500 .98rem/1.45 var(--font); color: var(--text); }
.svc-form.in-chat .svc-subhead { display: block; margin: 1rem 0 .3rem; font: 600 .7rem/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.svc-form.in-chat .svc-subhead:first-child { margin-top: .2rem; }
.svc-form.in-chat .svc-section { border: 0; padding: 0; margin: 0; }

/* ---- Your replies (the JS writes the "sent" label, sentLabel in the chat wording, into small.cw-sent) ---- */
.cw-a { flex-direction: column; align-items: flex-end; gap: .2rem; }
.cw-a span { background: var(--navy); border-radius: .9rem; padding: .6rem .95rem; font: 600 .95rem/1.4 var(--font); }
.cw-sent { font-size: .7rem; color: var(--muted); }
.cw-history { gap: 1.1rem; }

/* ---- Choices as pills (number kept for typing) ---- */
.svc-form.in-chat .svc-tiles, .svc-form.in-chat .svc-yesno { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .4rem; grid-template-columns: none; }
.svc-form.in-chat .svc-tile {
  display: inline-flex; flex-direction: row; align-items: center; gap: .45rem; width: auto; min-width: 0; min-height: 2.6rem;
  padding: .45rem .95rem .45rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font: 600 .9rem/1.25 var(--font); color: var(--text); text-align: left; box-shadow: none; transform: none;
}
.svc-form.in-chat .svc-tile:hover { border-color: var(--navy); transform: none; box-shadow: none; }
.svc-form.in-chat .svc-tile[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: none; }
.svc-form.in-chat .svc-tile[aria-pressed="true"] .svc-tile-label, .svc-form.in-chat .svc-tile[aria-pressed="true"] .svc-tile-hint { color: var(--white); }
.svc-form.in-chat .svc-tile img, .svc-form.in-chat .svc-tile-short, .svc-form.in-chat .svc-tile-note, .svc-form.in-chat .svc-badge-sm { display: none; }
.svc-form.in-chat .svc-tile-label, .svc-form.in-chat .svc-tile-name { font: inherit; color: inherit; }
.svc-form.in-chat .svc-tile-hint { font-size: .78rem; font-weight: 400; color: var(--muted); }
.svc-form.in-chat .svc-tile-hint:empty { display: none; }
.svc-form.in-chat .svc-tile-text { display: inline-flex; gap: .4rem; align-items: baseline; }
.svc-form.in-chat .svc-badge { padding: .15rem .45rem; font-size: .66rem; border-radius: 999px; }
.svc-form.in-chat .svc-yesno .svc-tile { min-width: 0; }
.cw-num { position: static; min-width: 1.45rem; height: 1.45rem; font-size: .7rem; line-height: 1.45rem; background: var(--soft); color: var(--muted); flex: none; }
.svc-form.in-chat .svc-tile { padding-top: .45rem; }
.svc-form.in-chat [aria-pressed="true"] .cw-num { background: rgba(255, 255, 255, .18); color: var(--white); }
.svc-form.in-chat .svc-site-state { margin: .7rem 0 .4rem; font-size: .66rem; letter-spacing: .1em; }
.svc-form.in-chat .svc-site-group:first-child .svc-site-state { margin-top: 0; }
.svc-form.in-chat .svc-alt { margin: .3rem 0 0; }
.svc-form.in-chat .svc-alt .btn, .svc-form.in-chat .svc-link { min-height: 2.4rem; padding: .4rem .9rem .4rem .5rem; border: 1px dashed var(--line); border-radius: 999px; background: none;
  font: 500 .86rem/1.2 var(--font); color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }

/* Tips and notes: a soft card inside the desk's message */
.svc-form.in-chat .svc-fault-help { margin: .6rem 0; padding: .75rem .9rem; border: 0; border-radius: .9rem; background: var(--soft); }
.svc-form.in-chat .svc-fault-help-title { font: 600 .7rem/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---- Write-in questions: asked as a message, answered in the chat box ---- */
.svc-form.in-chat .svc-field { margin: .8rem 0 0; }
.svc-form.in-chat .svc-field > span:first-child { font: 500 .98rem/1.45 var(--font); color: var(--text); margin: 0 0 .35rem; }
.svc-form.in-chat .svc-field input:not([type=file]):not([type=checkbox]), .svc-form.in-chat .svc-field textarea, .svc-form.in-chat .svc-field select {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.svc-form.in-chat .svc-field.cw-later { display: none; }
.svc-form.in-chat .svc-field.cw-filled > span:first-child { color: var(--muted); font-size: .85rem; }
.svc-form.in-chat .svc-field.cw-next > span:first-child::after { content: "  ↓ type it below"; color: var(--cyan-text); font-size: .78rem; font-weight: 600; }
.cw-echo { display: flex; justify-content: flex-end; margin: .25rem 0 0; }
.cw-echo button { max-width: 85%; border: 0; background: var(--navy); color: var(--white); border-radius: .9rem; padding: .55rem .95rem; text-align: left;
  font: 600 .95rem/1.4 var(--font); cursor: pointer; overflow-wrap: anywhere; }
.cw-echo button::after { content: "  ✎"; opacity: .6; }
.svc-form.in-chat .svc-field-hint { display: block; font-size: .8rem; color: var(--muted); }
.svc-form.in-chat .svc-field-error:not([hidden]) { display: block; margin-top: .3rem; font-size: .85rem; color: #c62828; }
/* Photos: a pill instead of the browser's file button */
.svc-form.in-chat .svc-field:has(input[type=file]) { display: inline-block; }
.svc-form.in-chat .svc-field:has(input[type=file]) > span:first-child { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; padding: .4rem .95rem;
  border: 1px dashed var(--line); border-radius: 999px; font: 500 .86rem/1.2 var(--font); color: var(--muted); cursor: pointer; margin: 0; }
.svc-form.in-chat .svc-field:has(input[type=file]) > span:first-child::before { content: "📎"; }
.svc-form.in-chat .svc-field input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.svc-form.in-chat .svc-notice { font-size: .85rem; color: var(--muted); background: var(--soft); border-radius: .8rem; padding: .6rem .8rem; margin: .5rem 0 0; }

/* ---- Next / Review / Send: a small pill ---- */
.svc-form.in-chat .svc-nav { margin-top: .9rem; }
.svc-form.in-chat .svc-nav .btn-primary { min-height: 2.6rem; padding: .5rem 1.1rem; border-radius: 999px; font: 600 .9rem/1 var(--font); box-shadow: none; background: var(--navy); border-color: var(--navy); }
.svc-form.in-chat .svc-nav .btn-primary::after { content: " ✓"; }
.svc-form.in-chat .svc-step:has(.svc-field.cw-next) .svc-nav .btn-primary { opacity: .35; }

/* ---- Check and send: "here's everything you told me" card ---- */
.svc-form.in-chat .svc-summary { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; margin: 0 0 .6rem; }
.svc-form.in-chat .svc-summary dt, .svc-form.in-chat .svc-summary dd { margin: 0; padding: .5rem .8rem; border-top: 1px solid var(--line); font-size: .88rem; }
.svc-form.in-chat .svc-summary dt:first-of-type, .svc-form.in-chat .svc-summary dt:first-of-type + dd { border-top: 0; }
.svc-form.in-chat .svc-summary dt { color: var(--muted); font-weight: 500; background: var(--soft); }
.svc-form.in-chat .svc-summary dd { font-weight: 600; color: var(--text); }
.svc-form.in-chat .form-privacy { font-size: .8rem; color: var(--muted); }

/* ---- Done: a result card ---- */
.svc-form.in-chat [data-step="done"] > p { margin: .4rem 0 0; }
.svc-form.in-chat .svc-levels { margin-top: .8rem; padding: .75rem .9rem; border-radius: .9rem; background: var(--soft); border: 0; font-size: .86rem; }

/* ---- Typing dots before each new question ---- */
.cw-typing { display: inline-flex; gap: .25rem; padding: .55rem .7rem; margin: .2rem 0 0; border-radius: 999px; background: var(--soft); }
.cw-typing i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--muted); animation: cw-blink 1s infinite; }
.cw-typing i:nth-child(2) { animation-delay: .15s; } .cw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cw-blink { 50% { opacity: .25; transform: translateY(-2px); } }
.svc-form.in-chat .cw-wait { display: none !important; }

/* Composer: "Message WaTo service desk…" */
.cw-row input { background: var(--soft); border-color: transparent; }
.cw-row input:focus { background: var(--white); }
@media (max-width: 52rem) { .svc-form.in-chat .svc-summary { grid-template-columns: 1fr; } .svc-form.in-chat .svc-summary dd { border-top: 0; padding-top: 0; } }
/* The window itself never scrolls (focusing the form's hidden boxes could shift it); only the conversation does */
.svc-chat-win { overflow: clip; }
/* Whatever the form hides stays hidden (the pill styles above must not undo it) */
.svc-form.in-chat [hidden] { display: none !important; }

/* ---- The four agreed pieces ---- */
/* Photos under the reply bubble */
.cw-photos { display: flex; justify-content: flex-end; gap: .35rem; margin: .35rem 0 0; }
.cw-photos img { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: .6rem; border: 1px solid var(--line); }
/* Review card */
.cw-lead { margin: .2rem 0 .55rem; font: 500 .98rem/1.45 var(--font); color: var(--text); }
.svc-form.in-chat [data-step="confirm"] .svc-summary dt, .svc-form.in-chat [data-step="confirm"] .svc-summary dd { cursor: pointer; }
.svc-form.in-chat [data-step="confirm"] .svc-summary dd:hover, .svc-form.in-chat [data-step="confirm"] .svc-summary dt:hover + dd { background: var(--soft); }
.svc-form.in-chat [data-step="confirm"] .svc-summary dd::after { content: " ✎"; color: var(--muted); font-size: .8rem; }
.svc-form.in-chat .svc-nav .cw-edit { min-height: 2.6rem; padding: .5rem 1rem; border-radius: 999px; font: 600 .9rem/1 var(--font); }
/* What it's doing (work list), then the job card */
.cw-work { margin: 1.1rem 0 0; }
.cw-work ul { list-style: none; margin: .5rem 0 0; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: .9rem; display: grid; gap: .45rem; }
.cw-work li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--muted); }
.cw-work li::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.cw-work li.on { color: var(--text); } .cw-work li.on::before { border-color: var(--cyan); border-right-color: transparent; animation: cw-spin .7s linear infinite; }
.cw-work li.ok { color: var(--text); } .cw-work li.ok::before { border-color: #2e7d32; background: #2e7d32 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/80% no-repeat; }
/* Handed over (only "Saved" is true when the reply arrives): plain, no tick */
.cw-work li.sent { color: var(--text); } .cw-work li.sent::before { border-color: var(--line); background: var(--soft); }
.cw-work li.fail { color: #c62828; } .cw-work li.fail::before { border-color: #c62828; }
@keyframes cw-spin { to { transform: rotate(360deg); } }
.cw-tech { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }
.cw-tech summary { cursor: pointer; }
.cw-tech > *:not(summary) { margin-top: .5rem; }
.cw-job { margin: .6rem 0 0; max-width: 26rem; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: var(--white); box-shadow: 0 .4rem 1.4rem rgba(17,24,39,.08); }
.cw-job-k { margin: 0; padding: .7rem 1rem 0; font: 600 .66rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cw-job-ref { margin: .3rem 0 0; padding: 0 1rem; font: 400 1.5rem/1.2 "Ethnocentric", var(--head); color: var(--navy); letter-spacing: .03em; }
.cw-job-what { margin: .6rem 0 0; padding: .6rem 1rem 0; border-top: 1px solid var(--line); font: 600 .95rem/1.4 var(--head); color: var(--text); }
.cw-job-status { margin: .25rem 0 0; padding: 0 1rem; font-size: .88rem; color: var(--text); }
.cw-job-next { margin: .5rem 0 0; padding: 0 1rem .9rem; font-size: .9rem; color: var(--body); }
.svc-form.in-chat [data-step="done"] .cw-fold { font-size: .9rem; }
.svc-form.in-chat [data-step="done"] .svc-levels { margin-top: .4rem; }
/* ---- Persona fixes ---- */
/* The form's own error line, inside the chat */
.svc-form.in-chat .svc-status { margin: .5rem 0 .6rem; padding: .55rem .8rem; border-radius: .8rem; background: var(--soft); color: var(--text); font-size: .9rem; }
.svc-form.in-chat .svc-status.svc-error { background: #fdecec; color: #c62828; font-weight: 600; }
.svc-form.in-chat .svc-status.svc-warn { background: #fdf0e6; color: #9a4507; font-weight: 600; }
.svc-form.in-chat .svc-status:empty { display: none; }
/* A failed send reads as failed */
.cw-work-failed ul { border-color: #f3b6b6; background: #fdecec; }
.cw-work-failed .cw-q { color: #c62828; }
/* Composer: hint line and placeholder with real contrast */
.cw-hint { color: var(--muted); }
.cw-row input::placeholder { color: var(--muted); }

/* ===================== Part 3: page and choice (plan additions) ===================== */
/* Page furniture that must not sit over or under the open chat */
html.svc-chat-open #Smallchat, html.svc-chat-open .float-help, html.svc-chat-open .wide-mark { display: none !important; }
/* The "how" choice inside the real form: two large cards side by side, stacked
   and full width on phones. Round icon, big label, one line of hint, "Last time". */
.svc-how-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.1rem 0 1.25rem; }
.svc-how .svc-how-card { justify-content: flex-start; min-height: 11rem; padding: 1.4rem 1.1rem 1.2rem; gap: .55rem; border-radius: var(--radius-lg); }
.svc-how .svc-how-card:hover { border-color: var(--blue); }
.svc-how-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; flex: none; margin-bottom: .15rem;
  background: var(--soft-2); color: var(--blue); transition: background var(--t-2) var(--e-out), color var(--t-2) var(--e-out); }
.svc-how .svc-how-card:hover .svc-how-icon, .svc-how .svc-how-card:focus-visible .svc-how-icon { background: var(--navy); color: var(--white); }
.svc-how .svc-tile-label { font: 700 1.25rem/1.2 var(--head); color: var(--navy); }
.svc-how .svc-tile-hint { font-size: .95rem; line-height: 1.4; color: var(--muted); max-width: 22rem; text-wrap: balance; }
.svc-how-icon svg { width: 1.75rem; height: 1.75rem; }
.svc-how [data-svc-how-last][hidden] { display: none; }
.svc-how .svc-nav { margin-top: 0; }
.svc-how .svc-nav .btn { min-height: 2.75rem; }
@media (max-width: 40rem) {
  .svc-how-tiles { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .svc-how .svc-how-card { min-height: 9.5rem; padding: 1.2rem 1rem; }
}

/* ===================== Part 4: the contact enquiry in the chat ===================== */
/* Same look as the service forms, for the enquiry's own attribute names and blocks. */
.svc-form.in-chat [data-eq-nav="back"] { min-height: 2.6rem; padding: .5rem 1rem; border-radius: 999px; font: 600 .9rem/1 var(--font); }
.svc-form.in-chat .eq-icon { display: none; }            /* the tile pictures are for the page; the chat uses the pill look */
.svc-form.in-chat .po-grid { display: block; }           /* one box at a time, so the echoes line up */
/* No job card on this form: its own done title and body, as the end card. */
.svc-form.in-chat .po-done { max-width: 26rem; margin: .6rem 0 0; padding: 1rem 1.1rem; text-align: left; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); box-shadow: 0 .4rem 1.4rem rgba(17,24,39,.08); }
.svc-form.in-chat .po-done-icon { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; margin-bottom: .5rem; }
.svc-form.in-chat .po-done h3 { margin: 0 0 .3rem; font: 700 1.1rem/1.3 var(--head); color: var(--navy); }
.svc-form.in-chat .po-done p { font-size: .92rem; color: var(--body); }

/* ===================== Part 5: the service request form in the chat ===================== */
/* The pictures on department and topic tiles are for the page; the chat uses the pill look. */
.svc-form.rq-form.in-chat .rq-dept-art, .svc-form.rq-form.in-chat .rq-topic-icon { display: none; }
.svc-form.rq-form.in-chat .rq-clients .rq-nocontract { min-height: 0; background: var(--white); }