/* ---------------------------------------------------------------------------
   Ada.

   A launcher in the bottom right corner and a panel above it, holding two views: the
   conversation, and the ticket that happens when Ada does not know or when somebody
   would rather write to a person.

   The first version of this was a gradient header, a grey conversation and bordered
   bubbles on both sides, which is four materials to say two things. It is now one
   white card with a hairline, the bot on soft green and the person on forest, and
   nothing decorative that does not carry meaning. The only gradient left is the
   launcher, because that one is an object rather than a surface.

   Scoped under .tbc so nothing here can reach the workspace, the plan viewer or the
   landing. It is the only fixed element on the site, so it yields: it disappears
   behind the landing's video player, it never prints, and it is reachable and
   dismissable from the keyboard alone.
   ------------------------------------------------------------------------- */

.tbc{
  --tbc-forest:#0d3d35;
  --tbc-leaf:#2c6b52;
  --tbc-mint:#8ff0c4;
  --tbc-soft:#eef5f1;
  --tbc-line:#e4ebe7;
  --tbc-text:#17302a;
  --tbc-muted:#5c716a;
  position:fixed;right:20px;bottom:20px;z-index:9000;
  font-family:var(--tp-font,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif);
  display:flex;flex-direction:column;align-items:flex-end;gap:12px
}
.tbc *{box-sizing:border-box}
.tbc__vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tbc :focus-visible{outline:2px solid var(--tbc-leaf);outline-offset:2px;border-radius:8px}

/* ---- the launcher ---------------------------------------------------------- */
.tbc__launch{
  appearance:none;border:0;cursor:pointer;position:relative;
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,#17604f,var(--tbc-forest));
  color:#fff;display:grid;place-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 12px 26px -10px rgba(9,42,34,.6);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease
}
.tbc__launch:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 34px -12px rgba(9,42,34,.68)}
.tbc__ico{
  position:absolute;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s ease,transform .2s ease
}
.tbc__ico--chat{fill:currentColor;stroke:none}
.tbc__ico--x{opacity:0;transform:rotate(-45deg) scale(.7)}
.tbc.is-open .tbc__ico--chat{opacity:0;transform:rotate(45deg) scale(.7)}
.tbc.is-open .tbc__ico--x{opacity:1;transform:none}

/* One quiet pulse, three times, for a first-time visitor only. */
.tbc__launch::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.tbc.is-new .tbc__launch::after{animation:tbcPulse 2.6s ease-out 3}
@keyframes tbcPulse{
  0%{box-shadow:0 0 0 0 rgba(44,107,82,.45)}
  70%{box-shadow:0 0 0 16px rgba(44,107,82,0)}
  100%{box-shadow:0 0 0 0 rgba(44,107,82,0)}
}

/* ---- the panel ------------------------------------------------------------- */
.tbc__panel{
  width:min(384px,calc(100vw - 40px));
  height:min(580px,calc(100dvh - 130px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--tbc-line);border-radius:20px;
  box-shadow:0 30px 70px -30px rgba(7,36,28,.4),0 2px 6px -3px rgba(7,36,28,.14);
  transform-origin:100% 100%;animation:tbcIn .24s cubic-bezier(.2,.8,.3,1)
}
@keyframes tbcIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.tbc__head{
  display:flex;align-items:center;gap:11px;padding:14px 12px 13px 16px;flex:0 0 auto;
  border-bottom:1px solid var(--tbc-line);background:#fff
}
.tbc__av{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--tbc-mint),#4fc3a1);
  color:var(--tbc-forest);font-weight:700;font-size:15px;letter-spacing:.01em
}
.tbc__who{min-width:0;flex:1 1 auto}
.tbc__who b{display:block;font-size:15px;font-weight:650;line-height:1.2;color:var(--tbc-text)}
.tbc__who small{display:block;margin-top:1px;font-size:11.5px;line-height:1.35;color:var(--tbc-muted)}
.tbc__icobtn{
  appearance:none;border:0;background:none;color:var(--tbc-muted);cursor:pointer;flex:0 0 auto;
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center
}
.tbc__icobtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tbc__icobtn:hover{background:var(--tbc-soft);color:var(--tbc-forest)}

.tbc__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.tbc__body[hidden]{display:none}

/* ---- the conversation ------------------------------------------------------ */
.tbc__log{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:16px;display:flex;flex-direction:column;gap:9px;background:#fff;scrollbar-width:thin
}
.tbc__msg{
  max-width:88%;padding:10px 13px;border-radius:15px;font-size:14px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;animation:tbcMsg .22s ease both
}
@keyframes tbcMsg{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tbc__msg--bot{align-self:flex-start;background:var(--tbc-soft);color:var(--tbc-text);border-bottom-left-radius:5px}
.tbc__msg--me{align-self:flex-end;background:var(--tbc-forest);color:#fff;border-bottom-right-radius:5px}
/* A refusal is not an error and must not look like one. It is Ada saying no on
   purpose, so it reads as her, with a quiet gold edge to mark that it is deliberate. */
.tbc__msg--refused{align-self:flex-start;background:#fdf8ee;color:#4a3a1a;border-bottom-left-radius:5px;box-shadow:inset 3px 0 0 #d9a441}
.tbc__msg--err{align-self:flex-start;background:#fdf3f1;color:#8a2d1e;border-bottom-left-radius:5px}
.tbc__msg a{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.tbc__msg--bot a,.tbc__msg--refused a{color:var(--tbc-leaf)}

.tbc__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.tbc__chip{
  appearance:none;cursor:pointer;font:500 12.5px/1.3 inherit;text-align:left;
  padding:8px 12px;border-radius:999px;color:var(--tbc-forest);
  background:#fff;border:1px solid var(--tbc-line)
}
.tbc__chip:hover{background:var(--tbc-soft);border-color:#c6dcd2}

.tbc__typing{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;background:var(--tbc-soft);border-radius:15px;border-bottom-left-radius:5px}
.tbc__typing i{width:6px;height:6px;border-radius:50%;background:#8fa79c;animation:tbcBlink 1.3s infinite}
.tbc__typing i:nth-child(2){animation-delay:.18s}
.tbc__typing i:nth-child(3){animation-delay:.36s}
@keyframes tbcBlink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.tbc__form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 8px;flex:0 0 auto;background:#fff}
.tbc__form textarea{
  flex:1 1 auto;min-width:0;resize:none;max-height:120px;
  font:400 14px/1.45 inherit;color:var(--tbc-text);
  padding:10px 13px;border:1px solid var(--tbc-line);border-radius:13px;background:#fbfdfc
}
.tbc__form textarea:focus{outline:none;border-color:var(--tbc-leaf);background:#fff}
.tbc__send{
  appearance:none;border:0;cursor:pointer;flex:0 0 auto;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--tbc-forest);color:#fff;transition:opacity .2s ease
}
.tbc__send svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbc__send:disabled{opacity:.35;cursor:default}

.tbc__foot{
  margin:0;padding:0 16px 12px;font-size:11px;line-height:1.5;color:var(--tbc-muted);flex:0 0 auto
}
.tbc__foot--flush{padding:10px 0 0}
.tbc__link{
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:11px;font-weight:650;color:var(--tbc-leaf);
  text-decoration:underline;text-underline-offset:2px
}
.tbc__link:hover{color:var(--tbc-forest)}

/* ---- the ticket ------------------------------------------------------------ */
.tbc__ticket{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.tbc__lead{margin:0 0 2px;font-size:13px;line-height:1.5;color:var(--tbc-muted)}
.tbc__f{display:block}
.tbc__f > span{display:block;margin-bottom:5px;font-size:12px;font-weight:650;color:var(--tbc-text)}
.tbc__f > span i{font-style:normal;font-weight:400;color:var(--tbc-muted)}
.tbc__f input,.tbc__f select,.tbc__f textarea{
  width:100%;font:400 14px/1.45 inherit;color:var(--tbc-text);
  padding:10px 12px;border:1px solid var(--tbc-line);border-radius:11px;background:#fbfdfc;
  appearance:none;resize:vertical
}
.tbc__f select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c716a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px
}
.tbc__f input:focus,.tbc__f select:focus,.tbc__f textarea:focus{outline:none;border-color:var(--tbc-leaf);background:#fff}
/* Every field is plain white, the message box included. A field with a problem keeps
   its white and gets a thin red edge only, and loses even that as soon as it is typed in. */
.tbc .tbc__f input,.tbc .tbc__f select,.tbc .tbc__f textarea{background:#fff}
.tbc__f.is-bad input,.tbc__f.is-bad textarea,.tbc__f.is-bad select{border-color:#d08a7d;background:#fff}
.tbc__err{margin:0;font-size:12.5px;line-height:1.45;color:#8a2d1e;background:#fdf3f1;border-radius:10px;padding:9px 11px}
.tbc__btn{
  appearance:none;border:0;cursor:pointer;width:100%;
  padding:12px 16px;border-radius:12px;font:650 14px/1.2 inherit;
  background:var(--tbc-forest);color:#fff;transition:opacity .2s ease
}
.tbc__btn:disabled{opacity:.45;cursor:default}
.tbc__btn--quiet{background:#fff;color:var(--tbc-forest);border:1px solid var(--tbc-line)}
.tbc__btn--quiet:hover{background:var(--tbc-soft)}

.tbc__done{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px 24px;text-align:center}
.tbc__done[hidden]{display:none}
.tbc__tick{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--tbc-soft)}
.tbc__tick svg{width:26px;height:26px;fill:none;stroke:var(--tbc-leaf);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tbc__done b{font-size:16px;font-weight:650;color:var(--tbc-text)}
.tbc__done p{margin:0;font-size:13.5px;line-height:1.55;color:var(--tbc-muted)}
.tbc__done span[data-tbc-ref]{font-weight:700;color:var(--tbc-forest);white-space:nowrap}
.tbc__done .tbc__btn{margin-top:8px;width:auto;padding:10px 20px}

/* ---- widths ----------------------------------------------------------------
   On a phone the panel takes the screen, because a card floating over a page somebody
   is already reading is worse than a sheet that owns the space while it is open.
   ------------------------------------------------------------------------- */
@media (max-width:560px){
  .tbc{right:14px;bottom:14px;left:14px;align-items:flex-end}
  .tbc__panel{width:auto;position:fixed;inset:10px;height:auto;border-radius:18px;animation:tbcInFull .24s cubic-bezier(.2,.8,.3,1)}
  @keyframes tbcInFull{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .tbc.is-open .tbc__launch{opacity:0;pointer-events:none}
  .tbc__launch{width:52px;height:52px;transition:opacity .2s ease}
}

/* The landing's video player takes the whole screen and sets lp-noscroll on <html>
   while it is up. The launcher goes rather than being stacked under it: on a phone the
   player keeps its controls in the lower corners, which is where the launcher lives. */
html.lp-noscroll .tbc{opacity:0;pointer-events:none;transition:opacity .2s ease}

/* ---- Clean, like an AI tool -------------------------------------------------------
   A larger, quieter window. It opens empty with one line in the middle; Ada's answers
   are plain text on white with a small mark beside them, your messages are soft grey
   bubbles on the right, and the box you type in is one rounded composer with the send
   button inside it. Refusals and errors keep their own colour so they still read as
   what they are. */
.tbc .tbc__panel{width:min(420px,calc(100vw - 32px));height:min(640px,calc(100dvh - 120px));border-radius:22px;border-color:#e6ece9;
  box-shadow:0 40px 90px -40px rgba(7,36,28,.45),0 2px 8px -4px rgba(7,36,28,.12)}
.tbc .tbc__head{padding:12px 10px 12px 16px;border-bottom:0}
.tbc .tbc__av{width:30px;height:30px;font-size:13.5px;background:var(--tbc-forest);color:#fff}
.tbc .tbc__who small{color:#7a8c85}
.tbc .tbc__log{padding:6px 18px 12px;gap:18px}
.tbc .tbc__empty{margin:auto;display:grid;justify-items:center;gap:14px;text-align:center;padding:24px 12px}
.tbc__emptyMark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--tbc-forest);color:#fff;font-weight:700;font-size:18px}
.tbc .tbc__empty b{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--tbc-text)}
.tbc .tbc__msg{max-width:100%;padding:0;border-radius:0;font-size:14.5px;line-height:1.62}
.tbc .tbc__msg--bot{background:none;color:var(--tbc-text);position:relative;padding-left:34px;align-self:stretch}
.tbc .tbc__msg--bot::before{content:"A";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--tbc-forest);color:#fff;font-size:11px;font-weight:700;line-height:24px;text-align:center}
.tbc .tbc__msg--me{max-width:85%;padding:10px 15px;border-radius:20px;background:#f0f3f2;color:var(--tbc-text)}
.tbc .tbc__msg--refused,.tbc .tbc__msg--err{padding:10px 14px;border-radius:14px;align-self:stretch}
.tbc .tbc__typing{background:none;padding:6px 0 6px 34px;position:relative}
.tbc .tbc__typing::before{content:"A";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--tbc-forest);color:#fff;font-size:11px;font-weight:700;line-height:24px;text-align:center}
.tbc .tbc__form{margin:0 14px 4px;padding:6px 6px 6px 14px;align-items:flex-end;gap:6px;border:1px solid #dfe6e3;border-radius:24px;background:#fff;
  box-shadow:0 8px 24px -16px rgba(7,36,28,.35);transition:border-color .2s,box-shadow .2s}
.tbc .tbc__form:focus-within{border-color:#b9cfc6;box-shadow:0 10px 28px -16px rgba(7,36,28,.45)}
.tbc .tbc__form textarea,.tbc .tbc__ticket input,.tbc .tbc__ticket select,.tbc .tbc__ticket textarea,.tbc button{font-family:inherit}
.tbc .tbc__form textarea{border:0;background:none;padding:8px 0;font-size:15px;line-height:1.45;font-weight:400;outline:none}
.tbc .tbc__form textarea:focus-visible{outline:none}
.tbc .tbc__send{width:36px;height:36px;border-radius:50%;flex:none}
.tbc .tbc__send svg{width:18px;height:18px}
.tbc .tbc__foot{padding:8px 18px 14px;text-align:center;font-size:11.5px;line-height:1.45;color:#7a8c85}
.tbc .tbc__link{font-size:11.5px}

/* Printing a plan must not put a chat button on the paper. */
@media print{.tbc{display:none!important}}

@media (prefers-reduced-motion:reduce){
  .tbc *,.tbc *::before,.tbc *::after{animation:none!important;transition:none!important}
}