/* ==========================================================================
   /themes/meridian/css/univai.css

   UnivAI — the theme's own from-scratch build of the site-wide "Mentor AI"
   assistant (univchat/), talking to the exact same backend
   (/api/univchat.php, /api/healtharea/agenticai.php, /api/agentic_stream.php,
   /shared/voiceagent/, /shared/livechat/) but styled in this theme's glass
   language and shaped as a freely-draggable round button instead of an
   edge-docked tab. Lives in the theme package, not a page's own assets, so
   any future page on any theme can mount #lxUnivai and get this for free.
   ========================================================================== */

/* ── The floating button ──────────────────────────────────────────────── */

.lx-univai-fab {
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: var(--lx-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lx-glass-strong);
  -webkit-backdrop-filter: var(--lx-glass-blur);
  backdrop-filter: var(--lx-glass-blur);
  border: 1px solid var(--lx-glass-border-strong);
  box-shadow: var(--lx-shadow-floating);
  color: var(--lx-accent);
  cursor: grab;
  touch-action: none;
  z-index: var(--lx-z-sheet);
  transition: box-shadow var(--lx-t-fast) var(--lx-ease), filter var(--lx-t-fast) var(--lx-ease);
}

.lx-univai-fab .lx-icon { width: 24px; height: 24px; }

.lx-univai-fab__label {
  font-family: var(--lx-f-mono, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lx-accent);
  pointer-events: none;
}
.lx-univai-fab.is-open .lx-univai-fab__label { color: var(--lx-t1); }

.lx-univai-fab:hover { filter: brightness(1.08); box-shadow: var(--lx-shadow-overlay); }
.lx-univai-fab.is-dragging { cursor: grabbing; transition: none; }
.lx-univai-fab.is-open { color: var(--lx-t1); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lx-univai-fab { background: var(--lx-bg-solid); }
}

/* A slow breathing ring so the button reads as "alive" without being
   distracting — same idea as the Learn shell's ambient backdrop drift. */
.lx-univai-fab__pulse {
  position: absolute;
  inset: -6px;
  border-radius: var(--lx-r-full);
  border: 1px solid var(--lx-accent);
  opacity: 0;
  animation: lx-univai-pulse 3.6s var(--lx-ease) infinite;
  pointer-events: none;
}

@keyframes lx-univai-pulse {
  0%   { transform: scale(0.85); opacity: 0.45; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-univai-fab__pulse { animation: none; opacity: 0; }
}

/* ── The panel ─────────────────────────────────────────────────────────── */

.lx-univai-panel {
  position: fixed;
  width: 380px;
  max-width: calc(100vw - 24px);
  height: 600px;
  max-height: calc(100vh - 24px);
  z-index: var(--lx-z-sheet);
  display: flex;
  flex-direction: column;
  background: var(--lx-glass-strong);
  -webkit-backdrop-filter: var(--lx-glass-blur);
  backdrop-filter: var(--lx-glass-blur);
  border: 1px solid var(--lx-glass-border);
  border-radius: var(--lx-r-xl);
  box-shadow: var(--lx-shadow-overlay);
  opacity: 0;
  transform: scale(0.94);
  transform-origin: var(--lx-univai-ox, 50%) var(--lx-univai-oy, 50%);
  pointer-events: none;
  transition: opacity var(--lx-t-fast) var(--lx-ease), transform var(--lx-t-fast) var(--lx-ease);
}

.lx-univai-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lx-univai-panel { background: var(--lx-bg-solid); }
}

@media (max-width: 560px) {
  /* var(--real-vh) — not 100vh — matches the shell's fix for mobile browser
     chrome (address bar) making 100vh taller than the actually-visible
     viewport; using raw 100vh here made offsetHeight bigger than
     window.innerHeight, which pushed positionPanel()'s clamp negative and
     hid the panel header above the top of the screen. */
  .lx-univai-panel { width: calc(100vw - 20px); height: calc(var(--real-vh, 100vh) - 20px); }
}

.lx-univai-panel__head {
  display: flex;
  align-items: center;
  gap: var(--lx-s-2);
  padding: var(--lx-s-4) var(--lx-s-4) var(--lx-s-2);
  flex: none;
  cursor: grab;
  touch-action: none;
}
.lx-univai-panel.is-dragging { transition: none; }
.lx-univai-panel.is-dragging .lx-univai-panel__head { cursor: grabbing; }
.lx-univai-panel__title {
  font-size: var(--lx-fs-md);
  color: var(--lx-t1);
  letter-spacing: var(--lx-ls-title);
}
.lx-univai-panel__head-actions { margin-left: auto; display: flex; gap: var(--lx-s-1); cursor: default; }

.lx-univai-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
  padding: 0 var(--lx-s-4) var(--lx-s-3);
  flex: none;
}
.lx-univai-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-s-1);
  padding: var(--lx-s-1) var(--lx-s-2);
  border-radius: var(--lx-r-full);
  background: var(--lx-fill);
  color: var(--lx-t3);
  font-size: var(--lx-fs-xs);
  cursor: pointer;
  user-select: none;
}
.lx-univai-toggle input { accent-color: var(--lx-accent); }
.lx-univai-toggle:has(input:checked) { background: var(--lx-accent-soft); color: var(--lx-t1); }

.lx-univai-controlbar {
  display: flex;
  align-items: center;
  gap: var(--lx-s-2);
  margin: 0 var(--lx-s-4) var(--lx-s-2);
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-r-md);
  background: var(--lx-accent-soft);
  color: var(--lx-t1);
  font-size: var(--lx-fs-xs);
  flex: none;
}
.lx-univai-controlbar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lx-accent);
  animation: lx-univai-blink 1.2s ease-in-out infinite;
  flex: none;
}
@keyframes lx-univai-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .lx-univai-controlbar__dot { animation: none; } }
.lx-univai-controlbar__text { flex: 1; }
.lx-univai-controlbar__stop {
  border: none; background: none; color: var(--lx-link); font-size: var(--lx-fs-xs); cursor: pointer;
}

.lx-univai-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--lx-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--lx-s-3);
}

.lx-univai-msg { max-width: 88%; font-size: var(--lx-fs-sm); line-height: var(--lx-lh-body); }
.lx-univai-msg p { margin: 0; white-space: pre-wrap; }
.lx-univai-msg--user {
  align-self: flex-end;
  background: var(--lx-accent-soft);
  color: var(--lx-t1);
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-r-md) var(--lx-r-md) var(--lx-s-1) var(--lx-r-md);
}
.lx-univai-msg--ai {
  align-self: flex-start;
  background: var(--lx-fill);
  color: var(--lx-t1);
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-r-md) var(--lx-r-md) var(--lx-r-md) var(--lx-s-1);
}
.lx-univai-msg--error { align-self: stretch; color: var(--lx-danger); }
.lx-univai-msg--system { align-self: stretch; color: var(--lx-t3); font-size: var(--lx-fs-xs); }
.lx-univai-msg--typing p { display: flex; gap: 3px; }

.lx-univai-typing span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--lx-t3);
  display: inline-block;
  animation: lx-univai-bounce 1.1s ease-in-out infinite;
}
.lx-univai-typing span:nth-child(2) { animation-delay: .15s; }
.lx-univai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lx-univai-bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .lx-univai-typing span { animation: none; } }

.lx-univai-msg-actions { display: flex; gap: var(--lx-s-2); margin-top: var(--lx-s-1); }
.lx-univai-action-btn {
  border: none; background: none; color: var(--lx-t3); font-size: var(--lx-fs-micro);
  cursor: pointer; padding: 0;
}
.lx-univai-action-btn:hover { color: var(--lx-t1); text-decoration: underline; }

.lx-univai-scrollbtn {
  position: absolute;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--lx-glass-border);
  background: var(--lx-glass-strong);
  color: var(--lx-t2);
  border-radius: var(--lx-r-full);
  padding: var(--lx-s-1) var(--lx-s-3);
  font-size: var(--lx-fs-xs);
  cursor: pointer;
  box-shadow: var(--lx-shadow-raised);
}

/* Agent task blocks + approvals */
.lx-univai-agent-task { align-self: stretch; }
.lx-univai-agent-task p { margin: 0 0 var(--lx-s-1); }
.lx-univai-agent-step { color: var(--lx-t2); }
.lx-univai-agent-note { color: var(--lx-t3); font-size: var(--lx-fs-xs); }
.lx-univai-agent-approve {
  align-self: stretch;
  background: var(--lx-warning-soft);
  border-radius: var(--lx-r-md);
  padding: var(--lx-s-3);
}
.lx-univai-agent-approve pre {
  white-space: pre-wrap;
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-micro);
  color: var(--lx-t2);
  margin: var(--lx-s-1) 0;
}
.lx-univai-agent-tool summary { color: var(--lx-t3); font-size: var(--lx-fs-xs); cursor: pointer; }
.lx-univai-agent-tool pre {
  white-space: pre-wrap; font-family: var(--lx-f-mono); font-size: var(--lx-fs-micro); color: var(--lx-t3);
}
.lx-univai-agent-file {
  display: inline-flex; gap: var(--lx-s-1); color: var(--lx-link); font-size: var(--lx-fs-xs);
  text-decoration: none;
}

.lx-univai-inputarea { flex: none; padding: var(--lx-s-3) var(--lx-s-4) var(--lx-s-4); position: relative; }

.lx-univai-suggestions {
  display: none;
  position: absolute;
  left: var(--lx-s-4);
  right: var(--lx-s-4);
  bottom: 100%;
  margin-bottom: var(--lx-s-1);
  background: var(--lx-glass-strong);
  -webkit-backdrop-filter: var(--lx-glass-blur-sm);
  backdrop-filter: var(--lx-glass-blur-sm);
  border: 1px solid var(--lx-glass-border);
  border-radius: var(--lx-r-md);
  box-shadow: var(--lx-shadow-raised);
  overflow: hidden;
}
.lx-univai-suggestions.is-open { display: block; }
.lx-univai-suggestion-hint {
  padding: var(--lx-s-2) var(--lx-s-3); font-size: var(--lx-fs-micro); color: var(--lx-t4);
  text-transform: uppercase; letter-spacing: var(--lx-ls-label);
}
.lx-univai-suggestion-item { padding: var(--lx-s-2) var(--lx-s-3); font-size: var(--lx-fs-sm); color: var(--lx-t2); cursor: pointer; }
.lx-univai-suggestion-item mark { background: var(--lx-accent-soft); color: var(--lx-t1); }
.lx-univai-suggestion-item:hover, .lx-univai-suggestion-item.is-selected { background: var(--lx-fill); color: var(--lx-t1); }

.lx-univai-form { display: flex; align-items: flex-end; gap: var(--lx-s-2); }
.lx-univai-form textarea {
  flex: 1;
  resize: none;
  max-height: 100px;
  min-height: 20px;
  background: transparent;
  border: none;
  color: var(--lx-t1);
  font: inherit;
  font-size: var(--lx-fs-sm);
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-r-md);
  border: 1px solid var(--lx-glass-border);
}
.lx-univai-form textarea:focus-visible { outline: 2px solid var(--lx-focus); outline-offset: 1px; }

.lx-univai-iconbtn {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--lx-r-full);
  border: none;
  background: var(--lx-fill);
  color: var(--lx-t3);
  cursor: pointer;
  transition: background var(--lx-t-fast) var(--lx-ease), color var(--lx-t-fast) var(--lx-ease);
}
.lx-univai-iconbtn:hover { background: var(--lx-fill-hover); color: var(--lx-t1); }
.lx-univai-iconbtn.is-active { background: var(--lx-accent-soft); color: var(--lx-accent); }
.lx-univai-iconbtn--send { background: var(--lx-accent); color: var(--lx-t-inv); }
.lx-univai-iconbtn--send:hover { background: var(--lx-accent); filter: brightness(1.1); }
.lx-univai-iconbtn--send:disabled { opacity: 0.5; cursor: default; }
.lx-univai-iconbtn--live { color: var(--lx-danger); }

.lx-univai-modelabel { margin-top: var(--lx-s-2); font-size: var(--lx-fs-micro); color: var(--lx-t4); }
.lx-univai-ratenote { margin: 2px 0 0; font-size: var(--lx-fs-micro); color: var(--lx-t4); }

.lx-univai-speechbar { margin-top: var(--lx-s-1); display: flex; align-items: center; gap: var(--lx-s-2); }
.lx-univai-speechbar select {
  font-size: var(--lx-fs-micro); background: var(--lx-fill); color: var(--lx-t2);
  border: none; border-radius: var(--lx-r-sm); padding: 2px 4px;
}

/* ── Starter chips ─────────────────────────────────────────────────────────
   The per-page questions the assistant offers on an empty conversation
   (window.AML_UC_CHIPS, from the area config). Behaviour: lx-univai.js. */
.lx-univai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .2rem .1rem .6rem;
}

.lx-univai-chip {
  padding: .38rem .68rem;
  border: 1px solid var(--lx-line, rgba(255,255,255,.14));
  border-radius: 999px;
  background: var(--lx-surface-2, rgba(255,255,255,.04));
  color: var(--lx-text-2, inherit);
  font: inherit;
  font-size: .78rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.lx-univai-chip:hover {
  background: var(--lx-surface-3, rgba(255,255,255,.08));
  border-color: var(--lx-line-strong, rgba(255,255,255,.24));
  color: var(--lx-text-1, inherit);
}

.lx-univai-chip:focus-visible {
  outline: 2px solid var(--lx-accent, #6c9bef);
  outline-offset: 2px;
}