/* =====================================================================
 * widgets.css — assistant panel and contact form.
 * Uses the tokens defined in base.css; defines no colours of its own.
 * ================================================================= */

/* ── Assistant ─────────────────────────────────────────────────────── */
.pa-launch{
  position:fixed; right:20px; bottom:20px; z-index:900;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; padding:0;
  border:1px solid var(--border); border-radius:50%;
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  color:#06121e; font:700 26px 'DM Sans',system-ui,sans-serif; line-height:1;
  cursor:pointer; box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.pa-launch:hover{filter:brightness(1.08); transform:scale(1.05)}
.pa-launch:focus-visible{outline:3px solid var(--teal-lt); outline-offset:3px}
/* Hidden while the panel is open — they occupy the same corner. */
.pa-launch.pa-hidden{display:none}

.pa-scrim{
  position:fixed; inset:0; z-index:900;
  background:rgba(3,7,15,.55); backdrop-filter:blur(2px);
}
/* On a desktop the panel is a corner widget, not a modal, so the scrim only
   needs to intercept taps on small screens. */
@media (min-width:721px){.pa-scrim{background:transparent; backdrop-filter:none}}
.pa-launch span[aria-hidden]{font-size:16px}

/* CRITICAL: .pa-panel sets `display:flex`, and an author display rule beats
   the user-agent stylesheet's [hidden]{display:none}. Without the rule
   below, `panel.hidden = true` changes the attribute and nothing else — the
   panel stays on screen, the close button appears dead, and the panel is
   visible on page load. Any state that has to override `display` must be
   declared here, not left to `hidden`. */
.pa-panel[hidden],
.pa-scrim[hidden]{display:none!important}

.pa-panel{
  position:fixed; right:20px; bottom:20px; z-index:901;
  width:min(390px,calc(100vw - 32px)); max-height:min(620px,calc(100vh - 40px));
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:0 24px 70px rgba(0,0,0,.6); overflow:hidden;
}
.pa-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:15px 16px; border-bottom:1px solid var(--border);
}
.pa-head strong{display:block; font-size:15px}
.pa-sub{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.pa-close{
  flex:0 0 auto; width:40px; height:40px; margin:-8px -8px 0 0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--muted); font-size:26px; line-height:1;
  cursor:pointer; border-radius:8px;
}
.pa-close:focus-visible{outline:2px solid var(--teal-lt); outline-offset:-2px}
.pa-close:hover{color:#e8edf8}

.pa-log{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.pa-msg{max-width:88%; padding:10px 13px; border-radius:13px; font-size:14px; line-height:1.5; white-space:pre-wrap}
.pa-user{align-self:flex-end; background:var(--indigo); color:#0b0f1a; border-bottom-right-radius:4px}
.pa-assistant{align-self:flex-start; background:var(--ink-soft,#1c243a); border:1px solid var(--border); border-bottom-left-radius:4px}
.pa-typing{color:var(--muted)}
.pa-error{border-color:var(--coral); color:var(--coral)}

.pa-form{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border)}
.pa-input{
  flex:1; padding:11px 13px; border-radius:10px; font:14px 'DM Sans',system-ui,sans-serif;
  background:var(--surface); border:1px solid var(--border); color:#e8edf8;
}
.pa-input:focus{outline:2px solid var(--indigo); outline-offset:1px}
.pa-send{
  width:44px; border:0; border-radius:10px; background:var(--teal);
  color:#06121e; font-size:18px; cursor:pointer;
}
.pa-foot{padding:0 16px 12px; margin:0; color:var(--muted); font-size:11.5px; line-height:1.5}
.pa-foot a{color:var(--teal-lt)}

@media (max-width:520px){
  .pa-panel{right:12px; left:12px; bottom:12px; width:auto}
}

/* ── Contact ───────────────────────────────────────────────────────── */
.contact-section{padding:96px 24px; border-top:1px solid var(--border)}
.contact-inner{max-width:680px; margin:0 auto}
.contact-form{margin-top:28px; display:grid; gap:14px}
.contact-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.contact-form label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.contact-form input,.contact-form textarea{
  width:100%; padding:13px 14px; border-radius:11px;
  background:var(--surface); border:1px solid var(--border); color:#e8edf8;
  font:15px 'DM Sans',system-ui,sans-serif;
}
.contact-form textarea{min-height:150px; resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--teal); outline-offset:1px}
.contact-form button{
  justify-self:start; padding:14px 30px; border:0; border-radius:999px;
  background:linear-gradient(135deg,var(--amber),var(--amber-lt));
  color:#0b0f1a; font:700 15px 'DM Sans',system-ui,sans-serif; cursor:pointer;
}
.contact-form button:disabled{opacity:.55; cursor:default}
.contact-status{min-height:20px; margin:2px 0 0; font-size:14px; color:var(--muted)}
.contact-status.ok{color:var(--teal-lt)}
.contact-status.err{color:var(--coral)}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
@media (max-width:620px){.contact-row{grid-template-columns:1fr}}