/* =============================================================================
   Jetsy 2.0 — the assistant button and panel.
   Uses the site's own tokens so it looks like part of the page, not a widget
   somebody pasted in.
   ============================================================================= */

/* ------------------------------------------------------------------ button -- */
/* --j2-bottom is how far up from the bottom the button sits. The public site
   leaves it at 16px; the dashboard raises it above its tab bar, which is fixed
   to the bottom of the screen and would otherwise be sitting under the button
   (and under the board's Save bar). One variable rather than a second stylesheet. */
.j2-btn{
  position:fixed; right:16px; bottom:var(--j2-bottom,16px); z-index:900;
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .95rem .5rem .5rem; min-height:56px;
  border:0; cursor:pointer; border-radius:999px;
  background:linear-gradient(180deg,#123A63,#0A2540);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,106,26,.55);
  color:#fff; font:inherit; font-weight:600; font-size:.9rem; letter-spacing:-.01em;
  /* keep clear of the home indicator on a notched phone */
  margin-bottom:env(safe-area-inset-bottom);
  transition:transform .14s ease, box-shadow .14s ease;
}
.j2-btn:hover{transform:translateY(-2px);
  box-shadow:0 16px 36px -12px rgba(0,0,0,.8), inset 0 0 0 1px #FF6A1A}
.j2-btn:active{transform:translateY(0)}
.j2-btn:focus-visible{outline:3px solid #FFB259; outline-offset:3px}
.j2-btn img{display:block; width:34px; height:34px; flex:none;
  background:#0A2540; border-radius:50%; padding:2px}
.j2-btn-t{white-space:nowrap}

/* A pulse, once, a few seconds after the page settles — enough to be noticed,
   not enough to be a nuisance. Nothing animates for anyone who has asked the
   system for less motion. */
@keyframes j2pulse{0%,100%{box-shadow:0 10px 30px -10px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,106,26,.55)}
  50%{box-shadow:0 10px 30px -10px rgba(0,0,0,.75),inset 0 0 0 2px #FF6A1A,0 0 0 8px rgba(255,106,26,.13)}}
.j2-btn{animation:j2pulse 2.4s ease-in-out 4s 2}
@media (prefers-reduced-motion:reduce){.j2-btn{animation:none;transition:none}}

/* Under 380px the label costs more than it earns — the face is the button. */
@media (max-width:380px){
  .j2-btn{padding:.5rem; gap:0}
  .j2-btn-t{display:none}
}

/* ------------------------------------------------------------------- panel -- */
.j2{
  border:0; padding:0; color:#E9F2FB; background:#0A1622;
  width:min(26rem, calc(100vw - 24px));
  height:min(34rem, calc(100dvh - 96px));
  max-width:100%; max-height:100%;
  margin:0; position:fixed; right:16px; top:auto; left:auto;
  bottom:calc(var(--j2-bottom,16px) + 72px);
  border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85), inset 0 0 0 1px #1C3047;
  display:flex; flex-direction:column;
}
.j2::backdrop{background:rgba(3,7,12,.55)}
.j2:not([open]){display:none}

/* On a phone it takes the screen. A 26rem card floating over a 375px viewport
   is a card with no room to type in. */
@media (max-width:560px){
  .j2{right:0; left:0; bottom:0; width:100%;   /* full width on a phone, over the tab bar */
      height:min(88dvh, calc(100dvh - 12px));
      border-radius:18px 18px 0 0}
}

.j2-hd{display:flex; align-items:center; gap:.6rem; padding:.75rem .8rem;
  background:linear-gradient(180deg,#123A63,#0B1E33); box-shadow:0 1px 0 #1C3047; flex:none}
.j2-face{width:34px; height:34px; flex:none; border-radius:50%; background:#0A2540 center/26px no-repeat
  url("../img/logo-icon-head.svg")}
.j2-who{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.j2-who b{font-size:.95rem}
.j2-who i{font-style:normal; font-size:.7rem; color:#9DB4CC; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.j2-x{margin-left:auto; flex:none; width:40px; height:40px; border:0; cursor:pointer;
  background:transparent; color:#B4C8DC; font-size:1.5rem; line-height:1; border-radius:10px}
.j2-x:hover{background:rgba(255,255,255,.07); color:#fff}
.j2-x:focus-visible{outline:2px solid #FFB259; outline-offset:-2px}

/* --------------------------------------------------------------------- log -- */
.j2-log{flex:1; overflow-y:auto; padding:.9rem .8rem; display:flex;
  flex-direction:column; gap:.55rem; -webkit-overflow-scrolling:touch}
.j2-m{max-width:88%; min-width:0}
.j2-m p{margin:0 0 .5rem; padding:.6rem .75rem; border-radius:14px;
  font-size:.9rem; line-height:1.5; overflow-wrap:anywhere}
.j2-m p:last-child{margin-bottom:0}
.j2-m.it{align-self:flex-start}
.j2-m.it p{background:#132435; color:#E9F2FB; border-bottom-left-radius:5px}
.j2-m.me{align-self:flex-end}
.j2-m.me p{background:#FF6A1A; color:#180900; border-bottom-right-radius:5px; font-weight:500}
.j2-m b{font-weight:700}

.j2-think p{display:flex; gap:5px; align-items:center; padding:.75rem .8rem}
.j2-think span{width:7px; height:7px; border-radius:50%; background:#7B94AC;
  animation:j2dot 1.1s infinite ease-in-out}
.j2-think span:nth-child(2){animation-delay:.16s}
.j2-think span:nth-child(3){animation-delay:.32s}
@keyframes j2dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.j2-think span{animation:none;opacity:.6}}

/* --------------------------------------------------------------------- ask -- */
.j2-ask{flex:none; display:flex; gap:.5rem; align-items:flex-end;
  padding:.6rem .7rem; background:#0B1E33; box-shadow:0 -1px 0 #1C3047}
.j2-ask textarea{
  flex:1; min-width:0; resize:none; font:inherit; font-size:16px;   /* 16px: anything
     smaller makes iOS zoom the whole page the moment the field is focused */
  line-height:1.4; color:#E9F2FB; background:#0A1622; border:0; border-radius:12px;
  padding:.6rem .7rem; min-height:44px; max-height:120px; overflow-y:auto;
  box-shadow:inset 0 0 0 1px #1C3047}
.j2-ask textarea:focus{outline:0; box-shadow:inset 0 0 0 1px #FF6A1A}
.j2-go{flex:none; width:44px; height:44px; border:0; cursor:pointer; border-radius:12px;
  background:#FF6A1A; color:#180900; display:flex; align-items:center; justify-content:center}
.j2-go:hover{filter:brightness(1.08)}
.j2-go:focus-visible{outline:2px solid #FFB259; outline-offset:2px}
.j2-ask.busy .j2-go{opacity:.45; pointer-events:none}

.j2-fine{flex:none; margin:0; padding:.45rem .8rem .7rem; background:#0B1E33;
  font-size:.66rem; line-height:1.45; color:#7B94AC;
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom))}

.j2-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap}

/* The page behind must not scroll while the panel is open — a phone that
   scrolls the article under your thumb while you are typing feels broken. */
html.j2-open, html.j2-open body{overflow:hidden}