/* ==========================================================================
   TREXA ASSISTANT
   Self-contained, namespaced .tas-*. Nothing here touches an existing
   selector. Fixed to the bottom right, clear of the safe-area insets.
   ========================================================================== */

/* The layout rules below set display on .tas and .tas__panel, which would
   otherwise beat the HTML hidden attribute. Both start hidden and are only
   revealed by the script, so this is what keeps a failed boot invisible. */
.tas[hidden],
.tas__panel[hidden]{display:none !important}

.tas{position:fixed;right:24px;bottom:24px;z-index:900;
  right:calc(24px + env(safe-area-inset-right,0px));
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:14px}

/* ---- launcher ---- */
.tas__launch{position:relative;width:58px;height:58px;flex:none;border:0;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;color:var(--white);background:var(--grad);
  box-shadow:0 10px 30px rgba(15,23,42,.28),0 2px 6px rgba(15,23,42,.18);
  transition:transform .2s ease,box-shadow .2s ease}
.tas__launch:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(15,23,42,.34)}
.tas__launch:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.tas__launch-open,.tas__launch-close{grid-area:1/1;display:grid;place-items:center;
  transition:opacity .18s ease,transform .18s ease}
.tas__launch-close{opacity:0;transform:rotate(-45deg) scale(.7)}
.tas.is-open .tas__launch-open{opacity:0;transform:rotate(45deg) scale(.7)}
.tas.is-open .tas__launch-close{opacity:1;transform:none}

/* ---- panel ---- */
.tas__panel{width:min(380px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 150px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(15,23,42,.22),0 4px 14px rgba(15,23,42,.10);
  transform-origin:bottom right;animation:tas-in .22s ease both}
@keyframes tas-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.tas__head{display:flex;align-items:center;gap:12px;padding:16px 16px 16px 18px;background:var(--navy)}
.tas__mark{width:84px;height:auto;flex:none;opacity:.95}
.tas__id{flex:1 1 auto;min-width:0;display:none}
.tas__id b{display:block;font-size:14px;font-weight:650;color:var(--white);letter-spacing:-.01em}
.tas__id span{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#9aa8bd;margin-top:2px}
.tas__ctrls{display:flex;gap:4px;margin-left:auto;flex:none}
.tas__ctrl{width:34px;height:34px;border:0;border-radius:var(--r-sm);background:transparent;
  color:#c3cedd;cursor:pointer;display:grid;place-items:center;
  transition:background .15s ease,color .15s ease}
.tas__ctrl:hover{background:rgba(255,255,255,.1);color:var(--white)}
.tas__ctrl:focus-visible{outline:3px solid var(--green);outline-offset:2px;color:var(--white)}

.tas__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px}
.tas__body:focus{outline:0}
.tas__kicker{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--slate)}
.tas__msg{margin:0 0 16px;padding:13px 15px;border-radius:4px var(--r-md) var(--r-md) var(--r-md);
  background:var(--wash);border:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--body)}

.tas__acts{display:flex;flex-direction:column;gap:8px}
.tas__acts--foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tas__act{display:block;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  font-family:inherit;font-size:14px;font-weight:550;line-height:1.35;color:var(--navy);
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.tas__act:hover{border-color:var(--blue);background:var(--wash);color:var(--blue)}
.tas__act:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.tas__act--primary{background:var(--grad);border-color:transparent;color:var(--white);font-weight:650}
.tas__act--primary:hover{background:var(--grad);color:var(--white);filter:brightness(1.06)}
/* services: eight entries must not run the panel tall */
.tas__acts--compact{gap:6px}
.tas__acts--compact .tas__act{padding:9px 12px;font-size:13px;font-weight:500}

.tas__note{margin:0;padding:11px 18px;border-top:1px solid var(--line);background:var(--wash);
  font-size:11.5px;line-height:1.45;color:var(--slate)}

@media(min-width:381px){.tas__id{display:block}}

@media(max-width:640px){
  .tas{right:calc(14px + env(safe-area-inset-right,0px));
       bottom:calc(14px + env(safe-area-inset-bottom,0px));gap:12px}
  .tas__panel{width:calc(100vw - 28px);max-height:min(540px,calc(100vh - 130px))}
  .tas__launch{width:54px;height:54px}
  .tas__body{padding:15px}
  .tas__head{padding:14px 14px 14px 16px}
  .tas__act{padding:13px 14px}
}

@media(prefers-reduced-motion:reduce){
  .tas__launch,.tas__launch-open,.tas__launch-close,.tas__act,.tas__ctrl{transition:none}
  .tas__panel{animation:none}
  .tas__launch:hover{transform:none}
}

/* --------------------------------------------------------------------------
   AI MESSAGING
   Bubbles, composer and status. Same navy/blue/green system as the rest.
   -------------------------------------------------------------------------- */
.tas__srlabel{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.tas__bubble{max-width:88%;margin:0 0 10px;padding:11px 14px;font-size:14px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word}
.tas__bubble--visitor{margin-left:auto;background:var(--navy);color:var(--white);
  border-radius:var(--r-md) var(--r-md) 4px var(--r-md)}
.tas__bubble--assistant{margin-right:auto;background:var(--wash);color:var(--body);
  border:1px solid var(--line);border-radius:var(--r-md) var(--r-md) var(--r-md) 4px}
.tas__acts--after{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

.tas__status{margin:0;padding:8px 18px;border-top:1px solid var(--line);background:var(--wash);
  font-size:12px;color:var(--slate)}
.tas__status::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;
  border-radius:50%;background:var(--blue);animation:tas-pulse 1.1s ease-in-out infinite}
@keyframes tas-pulse{0%,100%{opacity:.25}50%{opacity:1}}

.tas__composer{display:flex;align-items:flex-end;gap:8px;padding:12px 14px 12px 16px;
  border-top:1px solid var(--line);background:var(--white)}
.tas__input{flex:1 1 auto;min-width:0;max-height:110px;resize:none;overflow-y:auto;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  font-family:inherit;font-size:14px;line-height:1.45;color:var(--navy)}
.tas__input::placeholder{color:var(--slate)}
.tas__input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,119,210,.14)}
.tas__input:focus-visible{outline:3px solid var(--green);outline-offset:1px}
.tas__input:disabled{background:var(--wash);color:var(--slate);cursor:not-allowed}
.tas__send{flex:none;width:40px;height:40px;border:0;border-radius:var(--r-sm);cursor:pointer;
  display:grid;place-items:center;color:var(--white);background:var(--grad);
  transition:filter .15s ease,opacity .15s ease}
.tas__send:hover{filter:brightness(1.07)}
.tas__send:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.tas__send:disabled{opacity:.45;cursor:not-allowed}
.tas__composer.is-busy .tas__input{opacity:.7}

@media(max-width:640px){
  .tas__composer{padding:10px 12px}
  .tas__input{font-size:16px}          /* 16px stops iOS zooming on focus */
  .tas__send{width:44px;height:44px}   /* comfortable touch target */
  .tas__bubble{max-width:92%;font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .tas__status::before{animation:none;opacity:.7}
  .tas__send{transition:none}
}