/* WSKF Australia — assistant.css
   ----------------------------------------------------------------------
   WSKF Assistant. Isolated add-on stylesheet.

   Every selector is prefixed .wa- and nothing here touches an existing
   homepage component, so the whole feature can be removed by deleting this
   file, js/assistant.js, js/assistant-knowledge.js and the assistant block
   in index.html.

   Brand only: black, #E4191E red, white, restrained grey. Montserrat
   throughout. Mokuton is not used.
   ---------------------------------------------------------------------- */

:root{
  --wa-z-launch:250;
  --wa-z-panel:260;
  --wa-red:#E4191E;
  --wa-ink:#000000;
  --wa-ink-2:#141414;
  --wa-paper:#FBFAF9;
  --wa-bot:#F0EFED;
  --wa-user:#FDECEC;
  --wa-user-line:rgba(228,25,30,.32);
  --wa-line:rgba(0,0,0,.12);
  --wa-muted:#4A4A4A;
  --wa-lift:0px;
  --wa-gap-b:24px;
  --wa-gap-r:24px;
  --wa-size:56px;
}

/* ===================================================== LAUNCHER ======== */

.wa-launch{
  position:fixed;
  right:var(--wa-gap-r);
  bottom:calc(var(--wa-gap-b) + var(--wa-lift) + env(safe-area-inset-bottom,0px));
  z-index:var(--wa-z-launch);
  width:var(--wa-size); height:var(--wa-size);
  display:grid; place-items:center;
  padding:0; margin:0;
  border:1px solid rgba(0,0,0,.55);
  border-radius:18px;
  background:var(--wa-red);
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.35);
  transition:transform .18s var(--ease,ease), box-shadow .18s ease,
             background-color .18s ease, bottom .2s ease, opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.wa-launch:hover{ background:#C9151A; transform:translateY(-1px); }
.wa-launch:active{ transform:translateY(0); }
.wa-launch:focus-visible{ outline:3px solid #000; outline-offset:3px; }
.wa-launch .wa-i{ width:25px; height:25px; display:block; }
.wa-launch .wa-launch__x{ display:none; fill:currentColor; }

/* one restrained entrance, never a loop */
.wa-launch.is-in{ animation:wa-in .34s cubic-bezier(.22,.66,.28,1) both; }
@keyframes wa-in{
  from{ opacity:0; transform:translateY(10px) scale(.9); }
  to{ opacity:1; transform:none; }
}

/* Open state, all widths: the panel header Close button is the single close
   control, so the launcher fades out and stops taking pointer input. It stays
   in the DOM and stays focusable by script, which is what lets Escape and the
   header Close return focus to it. */
.wa-open .wa-launch{ opacity:0; pointer-events:none; transform:scale(.9); }

/* ===================================================== HINT BUBBLE ===== */

.wa-hint{
  position:fixed;
  right:calc(var(--wa-gap-r) + 4px);
  bottom:calc(var(--wa-gap-b) + var(--wa-lift) + var(--wa-size) + 14px + env(safe-area-inset-bottom,0px));
  z-index:var(--wa-z-launch);
  max-width:min(272px, calc(100vw - 48px));
  display:flex; align-items:flex-start; gap:.5rem;
  padding:.7rem .7rem .7rem .85rem;
  background:#fff; color:var(--wa-ink);
  border:1px solid var(--wa-line);
  border-left:3px solid var(--wa-red);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.wa-hint.is-on{ opacity:1; transform:none; }
.wa-hint__go{
  font:inherit; font-size:.82rem; line-height:1.4; text-align:left;
  background:none; border:0; padding:0; margin:0; cursor:pointer; color:inherit;
}
.wa-hint__go:focus-visible{ outline:2px solid var(--wa-red); outline-offset:2px; }
.wa-hint__x{
  flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer; color:var(--wa-muted);
  border-radius:4px;
}
.wa-hint__x:hover{ color:var(--wa-ink); }
.wa-hint__x:focus-visible{ outline:2px solid var(--wa-red); outline-offset:1px; }
.wa-hint__x .i{ width:15px; height:15px; fill:currentColor; }

/* ===================================================== PANEL =========== */

.wa-panel{
  position:fixed;
  right:var(--wa-gap-r);
  bottom:calc(var(--wa-gap-b) + var(--wa-lift) + var(--wa-size) + 12px + env(safe-area-inset-bottom,0px));
  z-index:var(--wa-z-panel);
  width:min(384px, calc(100vw - 32px));
  height:min(600px, calc(100svh - 132px));
  display:flex; flex-direction:column;
  background:var(--wa-paper);
  border:1px solid rgba(0,0,0,.22);
  border-radius:10px;
  box-shadow:0 18px 48px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.18);
  overflow:hidden;
  font-family:var(--body, "Montserrat", Arial, sans-serif);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .2s ease, transform .2s cubic-bezier(.22,.66,.28,1);
}
.wa-panel.is-open{ opacity:1; transform:none; }

/* --- header --- */
.wa-head{
  flex:0 0 auto;
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem .8rem .8rem 1rem;
  background:var(--wa-ink); color:#fff;
  border-bottom:2px solid var(--wa-red);
}
.wa-head__mark{
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  background:#fff; border-radius:5px; overflow:hidden;
}
.wa-head__mark img{ width:26px; height:26px; object-fit:contain; }
.wa-head__txt{ flex:1 1 auto; min-width:0; }
.wa-head__name{
  font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.2; margin:0;
}
.wa-head__state{
  display:flex; align-items:center; gap:.35rem;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:#A2A1A1; margin:.18rem 0 0;
}
.wa-head__dot{
  width:6px; height:6px; border-radius:50%; background:var(--wa-red);
  display:inline-block; flex:0 0 auto;
}
.wa-close{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(255,255,255,.24); border-radius:6px;
  color:#fff; cursor:pointer;
}
.wa-close:hover{ background:rgba(255,255,255,.1); }
.wa-close:focus-visible{ outline:2px solid var(--wa-red); outline-offset:2px; }
.wa-close .i{ width:17px; height:17px; fill:currentColor; }

/* --- conversation --- */
.wa-log{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:1rem .9rem .4rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.wa-msg{ display:flex; }
.wa-msg--bot{ justify-content:flex-start; }
.wa-msg--user{ justify-content:flex-end; }

.wa-bubble{
  max-width:88%;
  padding:.7rem .85rem;
  border-radius:10px;
  font-size:.875rem; line-height:1.55;
  overflow-wrap:anywhere;
}
.wa-msg--bot .wa-bubble{
  background:var(--wa-bot); color:var(--wa-ink);
  border:1px solid rgba(0,0,0,.07);
  border-top-left-radius:3px;
}
.wa-msg--user .wa-bubble{
  background:var(--wa-user); color:var(--wa-ink);
  border:1px solid var(--wa-user-line);
  border-top-right-radius:3px;
}
.wa-p{ margin:0; max-width:none; }
.wa-p + .wa-p{ margin-top:.5rem; }

/* --- typing --- */
.wa-bubble--typing{ padding:.6rem .8rem; }
.wa-dots{ display:flex; gap:4px; align-items:center; height:12px; }
.wa-dots i{
  width:6px; height:6px; border-radius:50%; background:#8A8A8A; display:block;
  animation:wa-dot 1.1s infinite ease-in-out;
}
.wa-dots i:nth-child(2){ animation-delay:.16s; }
.wa-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes wa-dot{
  0%,80%,100%{ transform:translateY(0); opacity:.45; }
  40%{ transform:translateY(-3px); opacity:1; }
}

/* --- chips --- */
.wa-chips{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:.7rem;
}
.wa-chip{
  font:inherit; font-size:.78rem; font-weight:600; line-height:1.2;
  min-height:34px; display:inline-flex; align-items:center;
  padding:.42rem .68rem;
  background:#fff; color:var(--wa-ink);
  border:1px solid rgba(0,0,0,.24); border-radius:6px;
  cursor:pointer; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wa-chip:hover{ background:var(--wa-ink); color:#fff; border-color:var(--wa-ink); }
.wa-chip:focus-visible{ outline:2px solid var(--wa-red); outline-offset:2px; }
.wa-chips.is-stale .wa-chip{ opacity:.42; pointer-events:none; }
.wa-chips.is-stale a.wa-chip{ pointer-events:auto; opacity:.6; }

/* --- cards --- */
.wa-card{
  margin-top:.6rem; padding:.7rem .75rem;
  background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:8px;
}
.wa-card--club{ border-left:3px solid var(--wa-red); }
.wa-card--notice{ border-left:3px solid var(--wa-ink); background:#F6F5F3; }
.wa-card__name{
  margin:0; font-weight:700; font-size:.82rem; line-height:1.3;
  letter-spacing:-.005em;
}
.wa-card__meta{
  margin:.28rem 0 0; font-size:.76rem; line-height:1.45; color:var(--wa-muted);
  max-width:none;
}
.wa-card__acts{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; }
.wa-btn{
  font:inherit; font-size:.74rem; font-weight:600; line-height:1;
  min-height:32px; display:inline-flex; align-items:center;
  padding:.4rem .6rem; border-radius:5px; cursor:pointer; text-decoration:none;
}
.wa-btn--ghost{ background:#fff; color:var(--wa-ink); border:1px solid rgba(0,0,0,.28); }
.wa-btn--ghost:hover{ background:var(--wa-ink); color:#fff; }
.wa-btn:focus-visible{ outline:2px solid var(--wa-red); outline-offset:2px; }

.wa-sum{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.2rem .7rem; }
.wa-sum dt{
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--wa-muted); align-self:baseline; white-space:nowrap;
}
.wa-sum dd{ margin:0; font-size:.79rem; font-weight:600; overflow-wrap:anywhere; }

/* --- composer --- */
.wa-composer{
  flex:0 0 auto;
  display:flex; align-items:flex-end; gap:.5rem;
  padding:.6rem .7rem;
  background:#fff; border-top:1px solid var(--wa-line);
}
.wa-input{
  flex:1 1 auto; min-width:0;
  resize:none; height:40px; max-height:92px;
  padding:.55rem .7rem;
  font-size:.86rem; line-height:1.4;
  color:var(--wa-ink); background:#FBFAF9;
  border:1px solid rgba(0,0,0,.24); border-radius:6px;
}
.wa-input::placeholder{ color:#6B6B6B; }
.wa-input:focus{ outline:2px solid var(--wa-red); outline-offset:0; border-color:var(--wa-red); }
.wa-send{
  flex:0 0 auto; width:44px; height:40px; display:grid; place-items:center;
  background:var(--wa-red); color:#fff;
  border:1px solid rgba(0,0,0,.28); border-radius:6px; cursor:pointer;
  transition:background-color .15s ease;
}
.wa-send:hover:not(:disabled){ background:#C9151A; }
.wa-send:disabled{ background:#D8D6D3; color:#8A8A8A; cursor:default; border-color:rgba(0,0,0,.14); }
.wa-send:focus-visible{ outline:2px solid #000; outline-offset:2px; }
.wa-send .i{ width:18px; height:18px; fill:currentColor; }

.wa-foot{
  flex:0 0 auto;
  margin:0; padding:.1rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px));
  background:#fff;
  font-size:.65rem; line-height:1.4; letter-spacing:.03em;
  color:var(--wa-muted); text-align:center;
  max-width:none;
}

.wa-vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ===================================================== TABLET / PHONE == */

@media (max-width:600px){
  :root{ --wa-size:52px; --wa-gap-r:16px; --wa-gap-b:16px; }

  .wa-launch{ border-radius:16px; }
  .wa-launch .wa-i{ width:23px; height:23px; }

  .wa-panel{
    right:12px; left:12px;
    width:auto;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    height:min(74svh, 600px);
    max-height:calc(100svh - 84px);
    border-radius:12px;
  }
  .wa-open .wa-hint{ display:none; }

  .wa-bubble{ max-width:92%; font-size:.85rem; }
  .wa-log{ padding:.85rem .75rem .35rem; }
  .wa-chip{ min-height:38px; }
  .wa-close{ width:40px; height:40px; }
}

@media (max-width:359px){
  .wa-hint{ display:none; }          /* no room on a very narrow phone */
  .wa-panel{ right:8px; left:8px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
}

/* short landscape phones */
@media (max-height:520px) and (max-width:900px){
  .wa-panel{ height:calc(100svh - 76px); max-height:none; }
}

/* ===================================================== MOTION ========== */

@media (prefers-reduced-motion:reduce){
  .wa-launch, .wa-panel, .wa-hint{ transition:none; }
  .wa-launch.is-in{ animation:none; }
  .wa-dots i{ animation:none; }
  .wa-panel{ opacity:1; transform:none; }
  .wa-panel:not(.is-open){ opacity:1; }
}

/* ===================================================== NO JS =========== */

html:not(.js) .wa-launch,
html:not(.js) .wa-panel,
html:not(.js) .wa-hint{ display:none !important; }

/* ===================================================== HIGH CONTRAST === */

@media (forced-colors:active){
  .wa-launch, .wa-panel, .wa-chip, .wa-card{ border:1px solid CanvasText; }
}