/* x0ne.co assistant. Tokens come from the page :root (--bg-dark, --border, --text, --accent, --mono, --sans).
   Text colours are opaque; --text-dim on white measured 5.3:1 (AA). */
.xa { position: fixed; right: 20px; bottom: 20px; z-index: 300; font-family: var(--sans); }
.xa[hidden], .xa [hidden] { display: none !important; }

.xa-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  background: var(--bg-dark); color: #ffffff;
  border: 1px solid #2a2a36; border-radius: 999px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(10, 10, 15, 0.18);
}
.xa-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hex-accent); }
.xa-pill:hover, .xa-pill:focus-visible { border-color: var(--hex-accent); outline: none; }
.xa.open .xa-pill { display: none; }

.xa-panel {
  display: flex; flex-direction: column;
  width: min(372px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 96px));
  background: var(--bg-surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(10, 10, 15, 0.16);
}
.xa-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 0.6rem 0 1rem;
  background: var(--bg-dark); color: #ffffff;
}
.xa-title { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.xa-close { display: grid; place-items: center; width: 32px; height: 32px; background: none; border: 0; color: #ffffff; cursor: pointer; }
.xa-close:focus-visible { outline: 1px solid var(--hex-accent); }

.xa-log { flex: 1; overflow-y: auto; padding: 1.1rem 1rem 0.5rem; display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.9rem; line-height: 1.55; }
.xa-intro { color: var(--text); }
.xa-suggest { display: flex; flex-direction: column; gap: 0.45rem; }
.xa-suggest button, .xa-choice button {
  text-align: left; padding: 0.6rem 0.8rem;
  background: var(--bg-surface); color: var(--text);
  border: 1px solid var(--border); font: inherit; font-size: 0.86rem; cursor: pointer;
}
.xa-suggest button:hover, .xa-choice button:hover,
.xa-suggest button:focus-visible, .xa-choice button:focus-visible { border-color: var(--accent); color: var(--accent-dark); outline: none; }
.xa-choice { display: flex; flex-direction: column; gap: 0.45rem; }
.xa-choice p { font-weight: 500; }
.xa-choice button:disabled { cursor: default; color: var(--text-dim); border-color: var(--border); }
.xa-choice button.picked { border-color: var(--text); color: var(--text); }

.xa-msg-user { align-self: flex-end; max-width: 85%; padding: 0.5rem 0.75rem; background: #f0f0f3; color: var(--text); white-space: pre-wrap; }
.xa-msg-bot { white-space: pre-wrap; }
.xa-msg-bot a, .xa-intro a { color: var(--accent-dark); }
.xa-notice { color: var(--text-dim); font-size: 0.84rem; }
.xa-pending { color: var(--text-dim); }

.xa-meet {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem; background: var(--bg-dark); color: #ffffff; text-decoration: none;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em;
}
.xa-meet:hover, .xa-meet:focus-visible { background: var(--accent-dark); outline: none; }

.xa-lead { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem; border: 1px solid var(--border); }
.xa-lead label { font-size: 0.78rem; font-weight: 500; color: var(--text); }
.xa-lead input[type="text"], .xa-lead input[type="email"], .xa-lead textarea {
  width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text); font: inherit; font-size: 0.86rem;
}
.xa-lead input:focus, .xa-lead textarea:focus { border-color: var(--accent); outline: none; }
.xa-lead .xa-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; font-size: 0.78rem; }
.xa-lead .xa-consent a { color: var(--accent-dark); }
.xa-lead .xa-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.xa-lead button { align-self: flex-start; padding: 0.55rem 1rem; background: var(--bg-dark); color: #ffffff; border: 0; font-family: var(--mono); font-size: 0.78rem; cursor: pointer; }
.xa-lead button:disabled { background: var(--text-dim); cursor: default; }
.xa-lead .xa-err { color: #b3261e; font-size: 0.8rem; }

.xa-input { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.6rem 0.75rem; border-top: 1px solid var(--border); }
.xa-input textarea {
  flex: 1; resize: none; max-height: 120px; padding: 0.5rem 0.6rem;
  border: 1px solid var(--border); background: var(--bg-surface); color: var(--text);
  font: inherit; font-size: 0.9rem; line-height: 1.4;
}
.xa-input textarea:focus { border-color: var(--accent); outline: none; }
.xa-send { display: grid; place-items: center; width: 36px; height: 36px; background: var(--accent); color: #ffffff; border: 0; cursor: pointer; }
.xa-send:disabled { background: var(--text-dim); cursor: default; }
.xa-foot { padding: 0.45rem 1rem 0.6rem; font-size: 0.66rem; color: var(--text-dim); font-family: var(--mono); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .xa { right: 16px; bottom: 16px; }
  .xa-panel { height: min(560px, calc(100vh - 32px)); }
}