/* מחוץ לקופסה · the site agent (assets/chat.js). Every value comes from design/tokens.css.
   It speaks the page's agent-card language: a white card in a hairline frame, a dark tab naming who works,
   and the work drawn inside it. The agent's own words are plain text; the visitor's are grey bubbles at the end side. */

/* ---------- The core: head, thread, suggestions, composer, notice ---------- */
.chat-core{display:flex;flex-direction:column;gap:var(--space-3);min-block-size:0;block-size:100%}
.chat-head{display:flex;align-items:flex-start;gap:var(--space-3)}
.chat-head__row{flex:1;display:grid;gap:var(--space-1);min-inline-size:0}
.chat-head__title:focus{outline:0}
.chat-head__title{font-size:var(--text-body);font-weight:var(--weight-bold);line-height:var(--leading-snug)}
.chat-close{display:grid;place-items:center;flex:none;inline-size:var(--size-tap);block-size:var(--size-tap);margin:calc(var(--space-3) * -1) 0 0 calc(var(--space-3) * -1);background:none;border:0;border-radius:var(--radius-sm);color:var(--color-ink);cursor:pointer}
@media (hover:hover){.chat-close:hover{background:var(--color-surface)}}
.chat-close .icon{inline-size:var(--space-4);block-size:var(--space-4)}
/* A new conversation: a quiet text button, there once something has been said */
.chat-clear{flex:none;min-block-size:var(--size-tap);margin-block-start:calc(var(--space-3) * -1);padding:0 var(--space-2);background:none;border:0;border-radius:var(--radius-sm);color:var(--color-ink-muted);font:inherit;font-size:var(--text-label);font-weight:var(--weight-bold);text-decoration:underline;text-underline-offset:var(--underline-offset);text-decoration-thickness:var(--border-hair);cursor:pointer}
@media (hover:hover){.chat-clear:hover{color:var(--color-ink)}}
.chat-clear[hidden]{display:none}
/* While the agent works, its tab dot breathes in blue: the one moving part of the panel */
.chat-core[aria-busy="true"] .agent__dot{animation:chat-dot var(--dur-chat-step) var(--ease-in-out) infinite alternate}
@keyframes chat-dot{to{background:var(--color-accent-soft)}}

.chat-thread{flex:1;display:flex;flex-direction:column;gap:var(--space-4);min-block-size:var(--chat-thread-min);overflow-y:auto;overscroll-behavior:contain;padding:var(--space-2) var(--space-1) var(--space-3);margin-inline:calc(var(--space-1) * -1);border-top:var(--border-hair) solid var(--color-line);scrollbar-width:thin}
.chat-thread:focus-visible{outline-offset:calc(var(--focus-width) * -1)}

.cmsg{display:grid;gap:var(--space-3);font-size:var(--text-small);line-height:var(--leading-body)}
.cmsg--agent{align-self:stretch;padding-top:var(--space-2)}
.cmsg--agent .cmsg__text{display:grid;gap:var(--space-2);max-inline-size:var(--measure-text);text-wrap:pretty}
.cmsg__list{display:grid;gap:var(--space-1);padding-inline-start:var(--space-5);list-style:disc}
.cmsg__list li::marker{color:var(--color-line-strong)}
.cmsg--me{align-self:flex-end;max-inline-size:85%;padding:var(--space-2) var(--space-3);background:var(--color-surface);border-radius:var(--radius-lg);border-end-end-radius:var(--radius-sm)}
.cmsg--me p{unicode-bidi:plaintext;white-space:pre-wrap;overflow-wrap:anywhere}
/* Before the first words arrive: three dots, shown only while waiting */
.cmsg__wait{display:inline-flex;gap:var(--space-1);padding-block:var(--space-2)}
.cmsg__wait span{inline-size:var(--size-dot);block-size:var(--size-dot);border-radius:var(--radius-pill);background:var(--color-line-strong);animation:chat-wait var(--dur-chat-step) var(--ease-in-out) infinite alternate}
.cmsg__wait span:nth-child(2){animation-delay:calc(var(--dur-chat-step) / 3)}
.cmsg__wait span:nth-child(3){animation-delay:calc(var(--dur-chat-step) / 3 * 2)}
@keyframes chat-wait{to{background:var(--color-accent)}}
/* Links the agent gives are actions on this page: blue, with the site's arrow */
.cmsg__go{justify-self:start;display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:var(--size-tap);padding:0;background:none;border:0;color:var(--color-accent);font:inherit;font-size:var(--text-small);font-weight:var(--weight-bold);text-decoration:underline;text-underline-offset:var(--underline-offset);text-decoration-thickness:var(--border-hair);cursor:pointer}
.cmsg__pointer{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-label);color:var(--color-ink-muted)}

.chat-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chat-chip{min-block-size:var(--size-tap);padding-block:var(--space-1);text-align:start;line-height:var(--leading-snug)}

.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-2);padding:var(--space-1);padding-inline-start:var(--space-3);background:var(--color-paper);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-sm)}
.chat-form:focus-within{outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--focus-offset)}
.chat-input{display:block;inline-size:100%;min-block-size:var(--size-tap);max-block-size:var(--chat-input-max);padding:var(--space-2) 0;background:none;border:0;outline:0;resize:none;color:var(--color-ink);font:inherit;font-size:var(--text-small);line-height:var(--leading-snug)}
.chat-input::placeholder,.chat-bar__input::placeholder{color:var(--color-ink-muted)}
/* dir="auto" reads an empty field as left-to-right, so the Hebrew hint sat on the left: while empty, it is right-to-left */
.chat-input:placeholder-shown,.chat-bar__input:placeholder-shown{direction:rtl}
.chat-send{display:grid;place-items:center;flex:none;inline-size:var(--size-tap);block-size:var(--size-tap);background:var(--color-accent);border:0;border-radius:var(--radius-sm);color:var(--color-on-accent);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
@media (hover:hover){.chat-send:hover{background:var(--color-accent-strong)}}
.chat-send:disabled{background:var(--color-line-strong);cursor:progress}
.chat-send .icon{inline-size:var(--space-4);block-size:var(--space-4)}
.chat-form.is-busy .chat-send{background:var(--color-mark)}
/* The conversation used up its messages: the composer stays in place, closed, and the form above it is the way on */
.chat-form.is-ended{background:var(--color-surface);border-color:var(--color-line)}
.chat-form.is-ended .chat-input{cursor:not-allowed}
.chat-form.is-ended .chat-send{background:var(--color-line-strong);cursor:not-allowed}
.cmsg__note{font-size:var(--text-label);color:var(--color-ink-muted)}
.chat-check:not([hidden]){display:flex;justify-content:center}
.chat-notice{font-size:var(--text-label);line-height:var(--leading-snug);color:var(--color-ink-muted);text-wrap:pretty}
.chat-notice a{color:inherit;text-decoration:underline;text-underline-offset:var(--underline-offset)}
.chat-mode{font-size:var(--text-label);line-height:var(--leading-snug);font-weight:var(--weight-bold);color:var(--color-ink-muted)}
.chat-mode:empty{display:none}

/* ---------- The work: tools drawn as agent cards ---------- */
.ctool{margin-top:var(--space-3);inline-size:100%;gap:var(--space-4)}
.ctool .agent__title{font-size:var(--text-small)}
.ctool__action{justify-self:start;align-self:flex-start;background:var(--color-paper);color:var(--color-ink)}
/* The sketch: a trigger, the agents in order with their ticks, where a person steps in, and the outcome.
   Rows arrive one after another, --i steps apart, so it reads as being drawn; the finished state is the resting one. */
.sketch{position:relative;display:grid;gap:var(--space-3)}
.sketch::before{content:"";position:absolute;inset-block:var(--space-3);inset-inline-start:calc(var(--space-5) / 2 - var(--border-hair) / 2);inline-size:var(--border-hair);background:var(--color-line-strong)}
.sketch__row{position:relative;display:grid;grid-template-columns:var(--space-5) minmax(0,1fr);gap:var(--space-3);align-items:start}
.sketch__body{display:grid;gap:0;font-size:var(--text-small);line-height:var(--leading-snug)}
.sketch__who{font-size:var(--text-label);color:var(--color-ink-muted)}
.sketch__row .tick,.sketch__start,.sketch__human{position:relative;z-index:1}
.sketch__start{justify-self:center;margin-top:var(--space-1);inline-size:var(--size-node);block-size:var(--size-node);background:var(--color-paper);border:var(--border-hair) solid var(--color-ink);border-radius:var(--radius-pill)}
.sketch__human{display:grid;place-items:center;inline-size:var(--space-5);block-size:var(--space-5);background:var(--color-paper);border:var(--border-hair) solid var(--color-ink);border-radius:var(--radius-sm)}
.sketch__human .i{inline-size:var(--space-4);block-size:var(--space-4)}
.sketch__row--human .sketch__what{font-weight:var(--weight-bold)}
.sketch__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);font-size:var(--text-small);color:var(--color-ink);line-height:var(--leading-snug)}
.sketch__foot .status{margin-top:0;font-size:var(--text-label)}
@media (prefers-reduced-motion:no-preference){
  .sketch__row,.sketch__foot{animation:chat-row-in var(--dur-chat-step) var(--ease-out) both;animation-delay:calc(var(--i) * var(--dur-chat-step))}
  .sketch__row .tick{animation:chat-tick calc(var(--dur-chat-step) * 2) var(--ease-out) both;animation-delay:calc(var(--i) * var(--dur-chat-step))}
  .sketch::before{transform-origin:top;animation:chat-line calc(var(--rows) * var(--dur-chat-step)) linear both}
}
@keyframes chat-row-in{from{opacity:0;transform:translateY(var(--space-1))}to{opacity:1;transform:none}}
@keyframes chat-tick{
  from{background:var(--color-surface);color:transparent}
  50%{background:var(--color-accent);color:var(--color-on-accent)}
  to{background:var(--color-mark);color:var(--color-on-ink)}
}
@keyframes chat-line{from{transform:scaleY(0);background:var(--color-accent)}to{transform:scaleY(1)}}

/* The estimate: the site calculator's own sum, with the visitor's numbers */
.calcbox{display:grid;gap:var(--space-1)}
.calcbox__label,.calcbox__formula{font-size:var(--text-label);color:var(--color-ink-muted)}
.calcbox__sum{font-size:var(--text-subtitle);font-weight:var(--weight-bold);line-height:var(--leading-snug);font-variant-numeric:tabular-nums}
.calcbox__week{font-size:var(--text-small)}
.calcbox__week strong{color:var(--color-accent)}

/* The call: a short form inside the card. The visitor sends it, never the agent. */
.cform{display:grid;gap:var(--space-3)}
.cform__field{display:grid;gap:var(--space-1)}
.cform label{font-size:var(--text-label);font-weight:var(--weight-bold)}
.cform .input{font-size:var(--text-small)}
.cform textarea.input{resize:vertical}
.cform__error{font-size:var(--text-label);color:var(--color-ink);font-weight:var(--weight-bold)}
.cform [aria-invalid="true"]{border-color:var(--color-ink)}
.cform__note{font-size:var(--text-label);color:var(--color-ink-muted)}
.cform__result{font-size:var(--text-small);text-wrap:pretty}

/* A section the agent points at is marked for a moment */
.is-spot{outline:var(--focus-width) solid transparent;outline-offset:calc(var(--space-2) * -1);animation:chat-spot var(--dur-spot) var(--ease-out)}
@keyframes chat-spot{from,40%{outline-color:var(--color-accent)}to{outline-color:transparent}}

/* ---------- A · widget: a launcher in the corner, a panel above it ---------- */
.chat-launch{position:fixed;bottom:var(--space-5);inset-inline-end:var(--space-5);z-index:6;display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:var(--size-tap);padding:var(--space-3) var(--space-5);background:var(--color-mark);border:0;border-radius:var(--radius-pill);box-shadow:var(--shadow-2);color:var(--color-on-ink);font:inherit;font-size:var(--text-small);font-weight:var(--weight-bold);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),bottom var(--dur-base) var(--ease-out)}
@media (hover:hover){.chat-launch:hover{background:var(--color-accent)}}
.chat-launch .i{inline-size:var(--space-5);block-size:var(--space-5)}
.chat-launch[aria-expanded="true"]{background:var(--color-accent)}
.chat-panel{position:fixed;z-index:7;margin:0;box-shadow:var(--shadow-2)}
.chat-widget .chat-panel{bottom:calc(var(--space-5) + var(--size-tap) + var(--space-4));inset-inline-end:var(--space-5);inline-size:min(var(--chat-panel-w),calc(100vw - var(--space-5) * 2));block-size:min(var(--chat-panel-h),calc(100dvh - var(--space-9) - var(--space-7)))}
.chat-nudge{position:fixed;bottom:calc(var(--space-5) + var(--size-tap) + var(--space-3));inset-inline-end:var(--space-5);z-index:6;display:flex;align-items:flex-start;max-inline-size:min(calc(var(--space-9) * 3),calc(100vw - var(--space-5) * 2));background:var(--color-paper);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-1)}
.chat-nudge__text{flex:1;padding:var(--space-3) var(--space-4);padding-inline-end:0;background:none;border:0;color:var(--color-ink);font:inherit;font-size:var(--text-small);line-height:var(--leading-snug);text-align:start;cursor:pointer}
.chat-nudge__x{flex:none;inline-size:var(--size-tap);block-size:var(--size-tap);background:none;border:0;color:var(--color-ink-muted);font:inherit;font-size:var(--text-lead);cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .chat-nudge:not([hidden]),.chat-panel.is-open{animation:chat-row-in var(--dur-base) var(--ease-out)}
}

/* ---------- B · bench: a section where the chat sits beside a board that the work is drawn on ---------- */
.bench{display:grid;grid-template-columns:var(--grid-split);gap:var(--space-6);align-items:stretch}
.bench__chat{block-size:var(--chat-panel-h);font-size:var(--text-body)}
.bench .cmsg{font-size:var(--text-body)}
.bench .chat-input{font-size:var(--text-body)}
.bench__board{display:flex;flex-direction:column;gap:var(--space-6);max-block-size:var(--chat-panel-h);overflow-y:auto;padding:var(--space-6);background:var(--color-paper);border:var(--border-hair) solid var(--color-line);border-radius:var(--radius-sm);scrollbar-width:thin}
.bench__board-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.bench__board-title{font-size:var(--text-small);font-weight:var(--weight-bold);color:var(--color-ink-muted)}
.bench__empty{flex:1;display:grid;place-content:center;gap:var(--space-4);padding:var(--space-7) var(--space-5);border:var(--border-hair) dashed var(--color-line-strong);border-radius:var(--radius-sm);color:var(--color-ink-muted);text-align:center;text-wrap:balance}
.bench__ghost{display:grid;gap:var(--space-3);justify-items:center}
.bench__ghost span{display:block;block-size:var(--space-3);inline-size:calc(var(--space-9) * 2);background:var(--color-surface);border-radius:var(--radius-sm)}
.bench__ghost span:nth-child(2){inline-size:calc(var(--space-9) * 1.5)}
.bench__ghost span:nth-child(3){inline-size:var(--space-9)}
.bench__board .ctool{margin-top:var(--space-3);font-size:var(--text-body)}
.bench__board .ctool .agent__title,.bench__board .sketch__body,.bench__board .sketch__foot{font-size:var(--text-body)}
.bench__board .calcbox__sum{font-size:var(--text-figure)}
/* With the bubble: the close button belongs to the corner panel only, and the section says where the chat went */
.bench__chat .chat-close{display:none}
.bench__away{display:grid;place-content:center;justify-items:center;gap:var(--space-4);block-size:100%;padding:var(--space-6) var(--space-4);color:var(--color-ink-muted);text-align:center}
.bench__away[hidden]{display:none}
/* The launcher steps aside while the section itself is on screen */
.chat-widget--bubble .chat-launch{transition:background-color var(--dur-fast) var(--ease-out),bottom var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out),visibility var(--dur-base) step-start}
.chat-widget--bubble.is-near .chat-launch[aria-expanded="false"]{opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base) step-end}
@media (prefers-reduced-motion:reduce){.chat-widget--bubble .chat-launch,.chat-widget--bubble.is-near .chat-launch[aria-expanded="false"]{transition:none}}

/* ---------- C · bar: an ask line docked at the bottom, and a drawer at the side ---------- */
.chat-bar{position:fixed;bottom:var(--space-5);inset-inline:0;z-index:6;display:flex;justify-content:center;gap:var(--space-2);margin-inline:auto;inline-size:min(calc(var(--ui-max) + var(--space-9)),calc(100% - var(--gutter) * 2));transform:translateY(calc(100% + var(--space-6)));visibility:hidden;transition:transform var(--dur-base) var(--ease-out),visibility var(--dur-base) step-end}
.chat-bar.is-shown{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease-out),visibility var(--dur-base) step-start}
.chat-open .chat-bar{visibility:hidden}
.chat-bar__ask{flex:1;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1);padding-inline-start:var(--space-2);background:var(--color-paper);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-pill);box-shadow:var(--shadow-2)}
.chat-bar__ask:focus-within{outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--focus-offset)}
.chat-bar__tag{display:inline-flex;align-items:center;gap:var(--space-2);flex:none;padding:var(--space-1) var(--space-3);background:var(--color-mark);color:var(--color-on-ink);border-radius:var(--radius-pill);font-size:var(--text-label);font-weight:var(--weight-bold);line-height:var(--leading-snug)}
.chat-bar__input{flex:1;min-inline-size:0;min-block-size:var(--size-tap);padding:0 var(--space-2);background:none;border:0;outline:0;color:var(--color-ink);font:inherit;font-size:var(--text-small)}
.chat-bar .chat-send{border-radius:var(--radius-pill)}
.chat-bar__call{display:none}
.chat-drawer{top:0;bottom:0;inset-inline-end:0;inline-size:min(var(--chat-drawer-w),100vw);border-radius:0;border-block:0;border-inline-end:0}
.chat-drawer.agent,.chat-panel--sheet.agent{padding-top:var(--space-5)}
/* Edge to edge, the tab cannot hang over a frame: it sits in the first row with the close button, the title under them */
.chat-drawer .chat-head{flex-wrap:wrap}
.chat-drawer .chat-head .agent__tab{position:static;transform:none;order:-2}
.chat-drawer .chat-close{order:-1;margin:calc(var(--space-2) * -1) auto 0 calc(var(--space-2) * -1)}
.chat-drawer .chat-head__row{flex-basis:100%}
/* On wide screens the page makes room for the drawer, so nothing it points at sits underneath */
@media (min-width:64rem){
  html[data-chat="bar"].chat-open body{padding-inline-end:var(--chat-drawer-w)}
}
html[data-chat="bar"] .callbar{display:none !important}

/* ---------- One column: the widget covers the screen, the bar sits where the call bar was ---------- */
@media (max-width:51.25rem){
  .chat-widget .chat-launch{inline-size:calc(var(--size-tap) + var(--space-3));block-size:calc(var(--size-tap) + var(--space-3));padding:0;justify-content:center;bottom:var(--space-4);inset-inline-end:var(--space-4)}
  .chat-widget .chat-launch__text{position:absolute;inline-size:var(--border-hair);block-size:var(--border-hair);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* The call bar rises at the bottom, so the launcher steps up over it */
  html:has(.callbar.is-shown) .chat-widget .chat-launch{bottom:calc(var(--size-tap) + var(--space-5) + var(--space-4))}
  /* Phones get no offer at all: nothing appears over the page that the visitor did not ask for */
  .chat-nudge{display:none !important}
  .chat-widget .chat-panel{inset:0;inline-size:auto;block-size:100dvh;border:0;border-radius:0;box-shadow:none;padding:var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom))}
  .chat-widget .chat-head{flex-wrap:wrap}
  .chat-widget .chat-head .agent__tab{position:static;transform:none;order:-2}
  .chat-widget .chat-close{order:-1;margin:calc(var(--space-2) * -1) auto 0 calc(var(--space-2) * -1)}
  .chat-widget .chat-head__row{flex-basis:100%}
  html.chat-open[data-chat="widget"] body,html.chat-open[data-chat="bar"] body,html.chat-open[data-chat="bench"] body{overflow:hidden}
  .chat-widget .cmsg,.chat-widget .chat-input{font-size:var(--text-body)}

  .bench{grid-template-columns:minmax(0,1fr)}
  /* Phones: the card hugs the greeting so the composer is on the first screen, then grows to the screen and scrolls */
  .bench__chat{display:flex;flex-direction:column;block-size:auto;max-block-size:calc(100dvh - var(--space-9))}
  .bench__chat .chat-core{flex:1;block-size:auto}
  .bench__chat .chat-thread{min-block-size:0}
  .bench__board{display:none}

  .chat-bar{bottom:0;inline-size:100%;padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--color-paper);border-top:var(--border-hair) solid var(--color-line);transform:translateY(100%)}
  .chat-bar__ask{box-shadow:none;border-radius:var(--radius-sm)}
  .chat-bar__tag{display:none}
  .chat-bar__call{display:inline-flex;flex:none;padding-inline:var(--space-4);font-size:var(--text-small)}
  .chat-bar .chat-send{border-radius:var(--radius-sm)}
  .chat-drawer{top:auto;inline-size:100%;block-size:var(--chat-sheet-h);border-inline:0;border-top:var(--border-hair) solid var(--color-line-strong);border-start-start-radius:var(--radius-lg);border-start-end-radius:var(--radius-lg);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}
  .chat-drawer .cmsg,.chat-drawer .chat-input{font-size:var(--text-body)}
}
@media (max-width:22.5rem){
  .chat-bar__call{padding-inline:var(--space-3)}
}

@media print{
  .chat-widget,.chat-bar,.chat-panel{display:none !important}
}
.bench__nojs{margin:auto;padding:var(--space-5);color:var(--color-ink-muted);text-align:center}