/* The "Explain this" panel. Loaded separately because most visits never open
   it, and it has no bearing on anything the study views render. */

.tf-ai { position:fixed; inset:0; z-index:60; display:flex; justify-content:flex-end; }
.tf-ai[hidden] { display:none; }
.tf-ai-scrim { position:absolute; inset:0; background:rgba(11,17,32,.42); backdrop-filter:blur(2px); }
.tf-ai-panel {
  position:relative; width:min(430px, 100%); background:var(--surface);
  border-left:1px solid var(--line); box-shadow:var(--shadow-3);
  display:flex; flex-direction:column;
  animation:tf-slide .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes tf-slide { from { transform:translateX(24px); opacity:0; } }
@media (max-width:520px) {
  .tf-ai { align-items:flex-end; }
  .tf-ai-panel { width:100%; height:86vh; border-left:0; border-top:1px solid var(--line);
    border-radius:var(--r-lg) var(--r-lg) 0 0; }
}

.tf-ai-panel header {
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--line-soft);
}
.tf-ai-panel header .eyebrow { flex:1; }

.tf-ai-body { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
.tf-msg { font-size:15px; line-height:1.6; border-radius:var(--r); padding:12px 14px; max-width:100%; }
.tf-msg p { margin:0 0 10px; } .tf-msg p:last-child { margin-bottom:0; }
.tf-msg.ai { background:var(--surface-2); border:1px solid var(--line-soft); color:var(--ink); }
.tf-msg.me { background:var(--brand-soft); border:1px solid var(--ember-300); align-self:flex-end;
  max-width:85%; color:var(--ink); }
:root[data-theme="dark"] .tf-msg.me, :root:not([data-theme="light"]) .tf-msg.me { border-color:var(--ember-700); }
.tf-msg.err { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); }

.tf-ai-ask { display:flex; gap:8px; padding:14px 16px 6px; border-top:1px solid var(--line-soft); }
.tf-ai-ask input {
  flex:1; font:inherit; font-size:15px; padding:10px 13px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
}
.tf-ai-ask input::placeholder { color:var(--muted); }

.tf-ai-foot { padding:2px 18px 16px; font-size:12.5px; color:var(--muted); font-family:var(--mono); }