/* ✨ AI reply drafts (mockup 04): the AI band in Reply compose, the "📚 Sources used" panel and the "✨ Draft reply"
   button on an email. Scoped to .reply-ai / .reply-sources / .ai-btn so no other screen changes. --ai* come from
   whats_next.css. */
.btn.ai-btn { background:var(--ai); border-color:var(--ai); color:#fff; }
.btn.ai-btn:hover { filter:brightness(1.08); }

.ai-band.reply-ai { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; background:var(--ai-soft); border:1px solid var(--ai-line);
  border-radius:6px; padding:.4rem .55rem; font-size:.82rem; color:var(--ai-ink); margin:0 0 .5rem; }
.reply-ai .ai-band-title { white-space:nowrap; }
.reply-ai .reply-ai-instr { display:flex; align-items:center; gap:.25rem; flex:1 1 16rem; min-width:12rem; }
.reply-ai .reply-ai-instr input { flex:1; min-width:0; font-size:.84rem; padding:.22rem .45rem; border:1px solid #c4b5fd; border-radius:4px; background:#fff; }
.reply-ai .reply-ai-tones { display:inline-flex; align-items:center; gap:.25rem; }
.reply-ai .mini-btn { display:inline-block; font:inherit; font-size:.78rem; font-weight:600; border:1px solid #c4b5fd; background:#fff; color:var(--ai-ink);
  border-radius:4px; padding:.12rem .5rem; white-space:nowrap; cursor:pointer; line-height:1.5; }
.reply-ai .tone-chip { border-radius:999px; }
.reply-ai .tone-chip[aria-pressed="true"] { background:#ede9fe; border-color:var(--ai); }
.reply-ai .mini-btn.ai-go { background:var(--ai); border-color:var(--ai); color:#fff; }
.reply-ai .mini-btn:disabled { opacity:.65; cursor:progress; }
.reply-ai .reply-ai-status { flex-basis:100%; font-size:.78rem; }
.reply-ai .reply-ai-status:empty { display:none; }
.reply-ai .reply-ai-status.error { color:#b91c1c; }

.email-section .logto.reply-sources { border-color:var(--ai); box-shadow:0 0 0 4px var(--ai-soft); margin-bottom:.8rem; }
.reply-sources .srcs { list-style:none; margin:0; padding:0; }
.reply-sources .srcs > li { border:1px solid var(--line); border-radius:6px; padding:.5rem .6rem; margin:0 0 .5rem; font-size:.84rem; background:#fff; }
.reply-sources .srcs > li .sh { display:flex; align-items:center; gap:.45rem; font-weight:600; }
.reply-sources .srcs > li .sh .n { width:18px; height:18px; border-radius:50%; background:var(--ai); color:#fff; font-size:.68rem; display:inline-flex;
  align-items:center; justify-content:center; font-weight:700; flex:none; }
.reply-sources .srcs > li .sh .sp { flex:1; }
.reply-sources .srcs > li.off .sh .n { background:#94a3b8; }
.reply-sources .srcs li.off { opacity:.55; }
.reply-sources .status-av { font-size:.74rem; font-weight:600; border-radius:999px; padding:.02rem .45rem; background:#dcfce7; color:#14532d; white-space:nowrap; }
.reply-sources .status-av.out { background:#fee2e2; color:#991b1b; }
.reply-sources .used { font-size:.78rem; color:#4b5563; margin:.25rem 0 0 1.6rem; }
.reply-sources .used span { display:inline-block; background:#f1f5f9; border-radius:3px; padding:0 .3rem; margin:.08rem .1rem 0 0; }
.reply-sources .used span.no { background:#fee2e2; color:#991b1b; text-decoration:line-through; }
.reply-sources .used.warn { color:#b45309; }
.reply-sources .em3 { margin:.3rem 0 0 1.6rem; font-size:.8rem; }
.reply-sources .em3 div { padding:.15rem 0; border-top:1px dashed #eef0f3; }
.reply-sources .perm-note { font-size:.8rem; margin:.4rem 0 0; }

@media (max-width: 700px) {
  .reply-ai .ai-band-title { white-space:normal; flex-basis:100%; }
  .reply-ai .reply-ai-instr { flex-basis:100%; }
}

.reply-ai [hidden], .reply-sources [hidden] { display: none !important; }

/* Email page: with ✨ Draft reply the button row can be wider than the title column, so the buttons wrap below the
   subject instead of squeezing it (or spilling over the side panel). */
.email-section .msg-top:has(#email-ai-reply) { flex-wrap:wrap; }
.email-section .msg-top:has(#email-ai-reply) > div:first-child { flex:1 1 16rem; min-width:0; }
.email-section .msg-btns:has(#email-ai-reply) { flex-wrap:wrap; justify-content:flex-start; }