/* ============================================================
   Global Sheds — "the questions we ask" as a conversation.
   Three directions, one stylesheet, no dependencies.

   Everything here resolves from the tokens already in avast.css:
   --ink, --slab, --navy, --red, --ember, --ice, --mono, --ease.
   Nothing new is invented, so whichever option wins folds back
   into avast.css without a colour audit of its own.

   The panel keeps the stylesheet's square-card rule at 4px. The
   bubbles don't: a square chat bubble stops reading as a chat
   bubble, so they take 16px with the sender's corner squared off.
   ============================================================ */

/* ---------- shared panel ---------- */
.chat-panel{
  position:relative;z-index:1;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.09) 100%);
  border:1px solid rgba(255,255,255,.16);border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  /* the gradient alone is the fallback: without backdrop support the panel still reads */
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
}
.chat-top{display:flex;align-items:center;gap:15px;
  padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.10)}
.chat-mark{flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  background:var(--red);color:#fff;display:grid;place-items:center;   /* 5.88:1 */
  font-family:var(--display);font-weight:700;font-size:.875rem;letter-spacing:.04em}
.chat-id{flex:1 1 auto;min-width:0}
.chat-name{font-size:1rem;font-weight:600;color:#fff;line-height:1.3}
.chat-meta{font-size:.875rem;color:rgba(255,255,255,.76);line-height:1.35}
.chat-replay{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;
  padding:10px 19px;border:1px solid rgba(255,255,255,.34);border-radius:100px;
  background:transparent;color:rgba(255,255,255,.82);
  font:inherit;font-size:.875rem;line-height:1;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.chat-replay:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.55)}
.chat-replay svg{flex:0 0 auto}

.chat-log{display:flex;flex-direction:column;gap:16px;
  padding:30px 26px;height:560px;overflow-y:auto;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.chat-log::-webkit-scrollbar{width:8px}
.chat-log::-webkit-scrollbar-track{background:transparent}
.chat-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px;border:0}
.chat-foot{padding:17px 26px 19px;border-top:1px solid rgba(255,255,255,.10);
  font-size:.875rem;color:rgba(255,255,255,.76)}
.chat-foot a{color:#fff}

/* ---------- .chat-ink: the panel at #0E1D38 ----------

   That is `--ink`, which is also the colour of the section it sits on, so the panel and
   its ground are the same value. It reads as a panel only because of its rule and its
   shadow: without them it would simply be a rectangle of nothing. Both are therefore
   doing real work here rather than decorating, and the rule is at .16 rather than the
   .10 a panel needs when it already differs from its ground.

   Opaque, so no backdrop-filter: there is nothing to see through, and it costs a
   compositing layer on every scroll.

   Every ratio computed against the composited ground:
     white on ink                      16.90:1
     76% white on ink (meta, foot)      9.90:1
     white on the question wash        12.82:1
     78% white on ink (answers)        10.50:1
     white on --red (the action)        5.88:1
*/
.chat-ink{
  background:var(--ink);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.chat-ink .chat-top{border-bottom:1px solid rgba(255,255,255,.12)}
.chat-ink .chat-name{color:#fff}
.chat-ink .chat-meta{color:rgba(255,255,255,.76)}
.chat-ink .chat-replay{border-color:rgba(255,255,255,.34);color:rgba(255,255,255,.82)}
.chat-ink .chat-replay:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.6)}
.chat-ink .chat-log{scrollbar-color:rgba(255,255,255,.22) transparent}
.chat-ink .chat-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.chat-ink .chat-foot{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.76)}
.chat-ink .chat-foot a{color:#fff}

/* the ice-blue wash is the dark-ground equivalent of the navy one the white panel used:
   the questions carry a tint, the answers carry none, and the pair reads by hue */
.chat-ink .msg-dot{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
  color:#fff}                                                    /* 6.9:1 */
.chat-ink .msg-them .bubble{background:rgba(168,192,224,.13);
  border-color:rgba(168,192,224,.22);color:#fff}                 /* 12.82:1 */
.chat-ink .msg-you .bubble{color:rgba(255,255,255,.78)}          /* 10.50:1 */
.chat-ink .typing{background:rgba(168,192,224,.13);border-color:rgba(168,192,224,.22)}
.chat-ink .typing i{background:rgba(255,255,255,.7)}

/* ---------- messages ---------- */
.msg{display:flex;align-items:flex-end;gap:10px;flex:0 0 auto}
.msg-them{justify-content:flex-start}
.msg-you{justify-content:flex-end}
/* Ice on the dot's own translucent fill measures 3.74:1, under the 4.5 a 10px
   label needs. White on the same fill holds 6.9:1, so the dot keeps its shape
   and loses the tint. */
.msg-dot{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:.6875rem;font-weight:600;letter-spacing:.04em;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.bubble{max-width:min(84%,36rem);padding:16px 22px;border-radius:18px;
  font-size:1rem;line-height:1.55}
.msg-them .bubble{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-bottom-left-radius:4px;color:rgba(255,255,255,.95)}
.msg-you .bubble{background:var(--navy);border:1px solid rgba(255,255,255,.16);
  border-bottom-right-radius:4px;color:#fff}                          /* 11.0:1 on navy */

/* ---------- play mode: the questions lead, the answers reply ----------

   The section is about what Global Sheds asks, so the questions carry the display
   face at 600 and the answers drop to .9375rem. The size gap is what makes the
   thread scannable: a visitor who reads only the left side still gets the point,
   which is the only reading most of them will give it.

   Messages come and go with the [hidden] attribute, which also keeps them out of the tab
   order: without that, a keyboard visitor could reach the closing "Request a quote"
   button before it appeared. It needs saying explicitly, since Tailwind's preflight sets
   [hidden] to display:none at (0,1,0) and `.msg{display:flex}` lands later in the cascade
   at the same weight, so the attribute alone does nothing. */
.chat-log .msg[hidden]{display:none}

.msg-them .bubble{
  font-family:var(--display);font-weight:600;line-height:1.45;
  letter-spacing:-.005em;color:#fff;
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);
  padding:18px 24px;max-width:min(90%,34rem)}
/* The answers carry no fill: nothing is said on that side that the visitor has to read
   closely, and dropping the ground puts every bit of the panel's weight on the questions.
   Their alignment is what still marks them as the other speaker. */
.msg-you .bubble{background:none;border:0;padding:6px 4px;
  line-height:1.5;max-width:min(80%,28rem)}

/* The closing action, shaped like a reply because that is where it sits. It keeps the
   red rather than the answers' navy: red is the page's action colour, and inside a thread
   of navy pills it is what tells a visitor this one does something. White on red is
   5.89:1. The arrow is there for the same reason, since a pill among pills needs to say
   it leads somewhere. */
.chat-go{display:inline-flex;align-items:center;gap:.6rem;
  padding:15px 26px;border-radius:100px;background:var(--red);color:#fff;
  font-weight:600;font-size:.9375rem;line-height:1.2;text-decoration:none;
  transition:background-color .2s var(--ease),transform .2s var(--ease)}
.chat-go svg{flex:0 0 auto;transition:transform .25s var(--ease)}
.chat-go:hover{background:var(--red-dark)}
.chat-go:hover svg{transform:translateX(3px)}
@media (max-width:767px){
  .msg-them .bubble{padding:16px 20px}
  .chat-go{padding:14px 22px}
}

/* the typing indicator is a keyframe on three dots, not a JS timer */
.typing{display:flex;align-items:center;gap:6px;flex:0 0 auto;align-self:flex-start;
  margin-left:42px;padding:18px 22px;border-radius:18px;border-bottom-left-radius:4px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);
  animation:chat-dot 1s var(--ease) infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* ---------- entrances. Hidden only once the script is running, so the
   thread reads as plain text with JS off or broken. ---------- */
[data-chat-js] .chat-log .msg{opacity:0}
[data-chat-js] .chat-log .msg.is-in{animation:chat-in-them .42s var(--ease) both}
[data-chat-js] .chat-log .msg-you.is-in{animation-name:chat-in-you}
@keyframes chat-in-them{from{opacity:0;transform:translate(-14px,10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes chat-in-you{from{opacity:0;transform:translate(14px,10px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- option B: the chips the visitor answers with ---------- */
.chat-ask{display:none;flex-wrap:wrap;justify-content:flex-end;gap:10px;flex:0 0 auto}
[data-chat-js] .chat-ask{display:flex}
.chat-ask.is-in{animation:chat-in-you .42s var(--ease) both}
.chip{padding:13px 23px;border:1px solid rgba(255,255,255,.40);border-radius:100px;
  background:transparent;color:#fff;font:inherit;font-size:.9375rem;line-height:1.2;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip:hover{background:#fff;color:var(--ink);border-color:#fff}

/* the closing card is a light surface inside a dark one: it carries .on-light
   so --dim resolves to steel rather than white-on-white */
.chat-sum{flex:0 0 auto;background:#fff;border-radius:4px;padding:28px 30px}
.chat-sum h3{font-size:1.25rem;margin-bottom:18px}
.chat-sum dl{display:grid;gap:11px;margin:0 0 22px}
.chat-sum .sum-row{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
  padding-bottom:11px;border-bottom:1px solid var(--hairline)}
.chat-sum dt{font-size:.9375rem;color:var(--steel);flex:0 0 auto}
.chat-sum dd{margin:0;font-size:.9375rem;font-weight:600;text-align:right}
[data-chat-js] .chat-sum{opacity:0}
[data-chat-js] .chat-sum.is-in{animation:chat-in-them .45s var(--ease) both}

/* ---------- option C: the docket ---------- */
.docket-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:70px;align-items:start;margin-top:60px}
.qa{display:grid;gap:34px}
.qa-q{font-family:var(--display);font-weight:700;font-size:clamp(1.125rem,1.6vw,1.375rem);
  line-height:1.35;color:#fff}
.qa-q .caret{display:none;width:2px;height:.95em;margin-left:5px;vertical-align:-2px;
  background:var(--ember)}
.qa-a{margin-top:12px;padding-left:20px;border-left:2px solid var(--ember);
  font-size:1rem;line-height:1.55;color:rgba(255,255,255,.75)}
[data-chat-js] .qa-item{opacity:0}
[data-chat-js] .qa-item.is-in{animation:qa-in .5s var(--ease) both}
[data-chat-js] .qa-item .qa-a{opacity:0;transform:translateY(6px)}
[data-chat-js] .qa-item.is-answered .qa-a{opacity:1;transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
[data-chat-js] .qa-item.is-asking .caret{display:inline-block;animation:qa-caret 1s steps(1) infinite}
@keyframes qa-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes qa-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.docket{position:sticky;top:30px;padding:30px 32px 26px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:4px}
.docket-h{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);margin-bottom:8px}                                  /* 9.01:1 on ink */
.docket-row{display:flex;justify-content:space-between;align-items:baseline;gap:22px;
  padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.docket-k{flex:0 0 auto;font-size:.9375rem;color:rgba(255,255,255,.68)}
.docket-v{position:relative;min-height:1.4em;text-align:right;
  font-family:var(--mono);font-size:.875rem;line-height:1.4;color:#fff;
  font-variant-numeric:tabular-nums}
/* absolute so the placeholder never occupies space: the value text holds the row
   width from the start, hidden, and the bar sits over where it will appear */
.docket-bar{position:absolute;right:0;top:.6em;width:52px;height:2px;
  background:rgba(255,255,255,.22)}
.docket-out{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.docket-out .figure{font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:8px}
.docket-note{font-size:.8125rem;color:rgba(255,255,255,.66);line-height:1.5}
[data-chat-js] .docket-t{opacity:0}
[data-chat-js] .docket-row.is-filled .docket-t{opacity:1;transition:opacity .4s var(--ease)}
[data-chat-js] .docket-row.is-filled .docket-bar{opacity:0;transition:opacity .25s var(--ease)}
[data-chat-js] .docket-out{opacity:0}
[data-chat-js] .docket-out.is-in{animation:qa-in .5s var(--ease) both}
.docket-t{position:absolute;right:0;top:0;white-space:nowrap}
@media (max-width:1439px){.docket-t{position:static;white-space:normal}}

.chat-replay-plain{margin-top:40px}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .docket-wrap{gap:46px}
}
@media (max-width:991px){
  .docket-wrap{grid-template-columns:1fr;gap:44px;margin-top:44px}
  .docket{position:static}
  .chat-log{height:520px}
}
@media (max-width:767px){
  .chat-log{height:460px;padding:22px 16px;gap:13px}
  .chat-top{padding:15px 16px;gap:11px}
  .chat-foot{padding:13px 16px 15px}
  .bubble{max-width:88%;padding:14px 18px;font-size:.9375rem}
  .typing{margin-left:0}
  .msg-dot{display:none}
  .chip{padding:10px 16px;font-size:.84375rem}
  .docket{padding:24px 20px 22px}
  .chat-sum{padding:20px}
}
@media (max-width:479px){
  /* key and value share a row until the value needs two lines of its own, at which
     point the last word strands on the right. Stacked, it reads as a spec sheet. */
  .docket-row{flex-direction:column;align-items:flex-start;gap:5px}
  .docket-v{text-align:left}
}

/* ---------- reduced motion: every sequence shows its finished state ---------- */
@media (prefers-reduced-motion:reduce){
  .chat-log{scroll-behavior:auto}
  [data-chat-js] .chat-log .msg,[data-chat-js] .chat-sum,
  [data-chat-js] .qa-item,[data-chat-js] .qa-item .qa-a,
  [data-chat-js] .docket-t,[data-chat-js] .docket-out{opacity:1;transform:none;animation:none}
  [data-chat-js] .docket-bar{display:none}
  .typing i{animation:none;opacity:.7}
}

/* ---------- the column the panel sits in, opposite the copy ---------- */
.chat-col{width:50%;min-height:350px;display:flex;flex-direction:column;justify-content:center;
  padding:35px 0 35px 55px}
.row-split.is-reversed .chat-col{padding:35px 55px 35px 0}
@media (max-width:991px){
  .chat-col,.row-split.is-reversed .chat-col{width:100%;min-height:0;padding:0 0 38px}
}
/* A 36px control on a touch screen. The rule has to be here rather than in avast.css:
   chat.css loads second, so anything avast.css says about .chat-replay loses regardless
   of how it is written. */
@media (max-width:1023px){.chat-replay{min-height:44px;padding-top:12px;padding-bottom:12px}}

/* ---------- the chat takes the larger half of the row ---------- */
/* copy flush to the shell's left edge, panel flush to its right, one 55px gutter
   between them rather than the generic row's two */
/* The row is capped below the 1760px shell and centred. A conversation read at the
   full shell width sets the copy to a very long measure and stretches the panel well
   past the bubbles inside it, so the exchange stops looking like one. Nothing else in
   the section moves: the cap is on the row, not on .shell. */
.row-split.has-chat{max-width:1440px;margin-inline:auto}
.row-split.has-chat .chat-col{width:46%;padding:35px 0}
.row-split.has-chat .row-copy{width:54%;padding-left:0;padding-right:55px}
@media (max-width:991px){
  .row-split.has-chat .chat-col,.row-split.has-chat .row-copy{width:100%;padding-right:0}
}