/* QrTransfers — AI assistant (p5-assistant). Tokens from app.css only (dark mode follows). */

.asst { --asst-z: 400; }

/* Floating button: bottom-right, above the mobile bottom nav on app pages. */
.asst-fab {
  position: fixed; z-index: var(--asst-z); right: var(--s-4);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5) 0 var(--s-4);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--grad-brand); color: var(--c-on-brand);
  font: 700 var(--fs-sm)/1 var(--font-body); box-shadow: var(--sh-brand), var(--sh-2);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.asst-fab:hover { transform: translateY(-1px); background: var(--grad-brand-hover); }
.asst-fab .icon { width: 22px; height: 22px; }
.has-bottomnav .asst-fab { bottom: calc(var(--bottomnav-h) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
.asst.is-open .asst-fab { display: none; }
@media (max-width: 480px) {
  .asst-fab { min-height: 52px; width: 52px; padding: 0; justify-content: center; }
  .asst-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 960px) {
  .has-bottomnav .asst-fab { bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
}

/* Panel: floating card on desktop, full-screen sheet on phones. */
.asst-panel {
  position: fixed; z-index: calc(var(--asst-z) + 1);
  right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 2rem)); height: min(640px, calc(100dvh - 2rem));
  display: flex; flex-direction: column;
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  overflow: hidden;
}
.asst-panel[hidden] { display: none !important; }
@media (max-width: 640px) {
  .asst-panel { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  html.asst-lock, html.asst-lock body { overflow: hidden; }
}

.asst-panel__head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); }
.asst-panel__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad-brand); color: var(--c-on-brand); flex-shrink: 0; }
.asst-panel__avatar .icon { width: 18px; height: 18px; }
.asst-panel__titles { flex: 1; min-width: 0; }
.asst-panel__title { margin: 0; font-size: var(--fs-base); }
.asst-panel__sub { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-iconbtn { display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-muted); cursor: pointer; }
.asst-iconbtn:hover { background: var(--c-surface-3); color: var(--c-text); }

.asst-acting { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); background: var(--c-info-bg); color: var(--c-info); border-bottom: 1px solid var(--c-info-border); font-size: var(--fs-sm); font-weight: 650; }
.asst-acting.is-acting { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning-border); }
.asst-acting > span:nth-child(2) { flex: 1; min-width: 0; }
.asst-acting__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: asst-pulse 1s infinite ease-in-out; }
.asst-acting__stop { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 36px; padding: 0 var(--s-3); border: 1px solid currentColor; border-radius: var(--r-pill); background: transparent; color: inherit; font: inherit; cursor: pointer; }

.asst-log { flex: 1; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); overscroll-behavior: contain; }
.asst-msg { max-width: 88%; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.asst-msg p { margin: 0 0 var(--s-2); }
.asst-msg p:last-child, .asst-msg ul:last-child, .asst-msg ol:last-child { margin-bottom: 0; }
.asst-msg ul, .asst-msg ol { margin: 0 0 var(--s-2); padding-left: 1.2em; }
.asst-msg li + li { margin-top: 2px; }
.asst-msg--bot { align-self: flex-start; background: var(--c-surface-3); border-bottom-left-radius: var(--r-sm); }
.asst-msg--user { align-self: flex-end; background: var(--brand-500); color: var(--c-on-brand); border-bottom-right-radius: var(--r-sm); white-space: pre-wrap; }
.asst-msg--error { align-self: stretch; max-width: none; background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid var(--c-danger-border); }
.asst-msg a { color: inherit; font-weight: 700; }
.asst-msg--bot a { color: var(--c-link); }

.asst-action { align-self: flex-start; display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--fs-xs); color: var(--c-muted); padding: 0 var(--s-2); }
.asst-action__mark { font-weight: 800; }
.asst-action--ok .asst-action__mark { color: var(--c-success); }
.asst-action--denied_by_user .asst-action__mark, .asst-action--error .asst-action__mark, .asst-action--blocked .asst-action__mark { color: var(--c-danger); }

.asst-suggest { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.asst-chip { min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-text); font: 600 var(--fs-sm)/1.2 var(--font-body); cursor: pointer; }
.asst-chip:hover { border-color: var(--brand-500); color: var(--c-link); }

.asst-approval { align-self: stretch; padding: var(--s-3) var(--s-4); border: 1px solid var(--c-info-border); border-radius: var(--r-lg); background: var(--c-info-bg); }
.asst-approval--sensitive { border-color: var(--c-warning-border); background: var(--c-warning-bg); }
.asst-approval__title { margin: 0 0 var(--s-1); font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.asst-approval__desc { margin: 0 0 var(--s-2); font-weight: 700; overflow-wrap: anywhere; }
.asst-approval__note { margin: 0 0 var(--s-2); font-size: var(--fs-xs); color: var(--c-warning); }
.asst-approval__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.asst-btn { min-height: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text); font: 700 var(--fs-sm)/1 var(--font-body); cursor: pointer; }
.asst-btn--primary { border-color: transparent; background: var(--brand-500); color: var(--c-on-brand); }
.asst-btn--primary:hover { background: var(--brand-600); }

.asst-typing { display: flex; gap: 4px; padding: 0 var(--s-4) var(--s-2); }
.asst-typing span:not(.visually-hidden) { width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted); animation: asst-pulse 1.1s infinite ease-in-out; }
.asst-typing span:nth-child(2) { animation-delay: .15s; }
.asst-typing span:nth-child(3) { animation-delay: .3s; }

.asst-form { display: flex; gap: var(--s-2); align-items: flex-end; padding: var(--s-3) var(--s-3) var(--s-2); border-top: 1px solid var(--c-border); }
.asst-input { flex: 1; min-height: var(--tap); max-height: 140px; padding: 11px var(--s-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); font: 16px/1.35 var(--font-body); resize: none; }
.asst-input:focus { outline: none; border-color: var(--c-focus); box-shadow: var(--ring); }
.asst-send { display: grid; place-items: center; width: var(--tap); height: var(--tap); flex-shrink: 0; border: 0; border-radius: 50%; background: var(--brand-500); color: var(--c-on-brand); cursor: pointer; }
.asst-send:hover { background: var(--brand-600); }
.asst.is-busy .asst-send { opacity: .55; }
.asst-disclaimer { margin: 0; padding: 0 var(--s-4) var(--s-3); font-size: 11px; color: var(--c-muted); }

/* Highlight ring on the element the assistant acts on / points at. */
.asst-ring { outline: 3px solid var(--c-warning) !important; outline-offset: 3px !important; border-radius: 6px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-warning) 22%, transparent) !important; transition: outline-color .2s; }
.asst-ring-tip { position: absolute; z-index: calc(var(--asst-z) - 1); max-width: min(320px, calc(100vw - 24px)); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--c-text); color: var(--c-surface); font: 600 var(--fs-sm)/1.35 var(--font-body); box-shadow: var(--sh-2); }

@keyframes asst-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .asst-acting__dot, .asst-typing span { animation: none; }
  .asst-fab { transition: none; }
}
@media print { .asst { display: none !important; } }