/* Alice chat: the /alice page and the floating widget (2026-10-01). rem units + theme variables, so site magnification and light/dark follow automatically. */
.qza-msg { display: flex; flex-direction: column; margin: .5rem 0; max-width: 100%; }
.qza-msg.me { align-items: flex-end; } .qza-msg.alice { align-items: flex-start; }
.qza-bubble { max-width: 88%; padding: .5rem .75rem; border-radius: 1rem; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.45; }
.qza-msg.me .qza-bubble { background: var(--qz-accent, #5b3fa0); color: var(--qz-accent-ink, #fff); border-bottom-right-radius: .25rem; }
.qza-msg.alice .qza-bubble { background: var(--qz-raised, #ecebf2); color: var(--qz-text, #111); border-bottom-left-radius: .25rem; }
.qza-error .qza-bubble { background: #fde0e0; color: #6b0000; }
:root:not([data-theme="light"]) .qza-error .qza-bubble { background: #4a1d1d; color: #ffd6d6; }
.qza-typing .qza-bubble { color: var(--qz-muted, #666); font-style: italic; }
.qza-dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: qza-dots 1.2s steps(4, end) infinite; }
@keyframes qza-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .qza-dots::after { animation: none; content: "…"; } }
.qza-refs { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; margin: .3rem 0 0 .25rem; max-width: 88%; }
.qza-refs-label { font-size: .75rem; color: var(--qz-muted, #666); }
.qza-chip { display: inline-block; max-width: 100%; padding: .125rem .5rem; border: 1px solid var(--qz-line, #ccc); border-radius: 1rem; font-size: .75rem; text-decoration: none; color: var(--qz-link, #4a2f9a); background: var(--qz-surface, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qza-chip:hover, .qza-chip:focus { border-color: var(--qz-accent, #5b3fa0); }
.qza-related { margin: .3rem 0 0 .25rem; font-size: .8125rem; max-width: 88%; }
.qza-related summary { cursor: pointer; color: var(--qz-muted, #666); }
.qza-rel { margin: .375rem 0; } .qza-snip { color: var(--qz-muted, #666); font-size: .75rem; margin-top: .125rem; }
.qza-compose { display: flex; gap: .5rem; align-items: flex-end; }
.qza-input { flex: 1; resize: none; min-height: 2.5rem; max-height: 10rem; padding: .5rem .75rem; border: 1px solid var(--qz-line, #ccc); border-radius: .75rem; background: var(--qz-page, #fff); color: var(--qz-text, #111); font: inherit; font-size: .9375rem; line-height: 1.4; }
.qza-send { padding: .5rem 1rem; border: 0 !important; border-radius: .75rem; background: var(--qz-accent, #5b3fa0) !important; color: var(--qz-accent-ink, #fff) !important; font: inherit; font-size: .9375rem; cursor: pointer; }
.qza-send:disabled { opacity: .5; cursor: default; }
.qza-quiet { background: none !important; border: 0 !important; color: var(--qz-muted, #666) !important; cursor: pointer; font-size: .8125rem; text-decoration: underline; padding: .125rem .375rem; }

/* floating widget */
.qza-widget { position: fixed; right: 1rem; bottom: 1rem; z-index: 9000; font-size: 1rem; }
.qza-fab { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0 !important; background: var(--qz-accent, #5b3fa0) !important; color: var(--qz-accent-ink, #fff) !important; font-size: 1.25rem; cursor: pointer; box-shadow: var(--qz-shadow, 0 2px 10px rgba(0,0,0,.3)); }
.qza-panel { position: absolute; right: 0; bottom: 4rem; width: min(24rem, calc(100vw - 2rem)); height: min(32rem, calc(100vh - 7rem)); display: flex; flex-direction: column; background: var(--qz-surface, #fff); color: var(--qz-text, #111); border: 1px solid var(--qz-line, #ccc); border-radius: 1rem; box-shadow: var(--qz-shadow, 0 4px 24px rgba(0,0,0,.3)); overflow: hidden; }
.qza-panel[hidden] { display: none; }
.qza-panel-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--qz-line, #ddd); }
.qza-panel-head b { flex: 1; }
.qza-widget .qza-log { flex: 1; overflow-y: auto; padding: .5rem .75rem; }
.qza-widget .qza-compose { padding: .5rem .75rem; border-top: 1px solid var(--qz-line, #ddd); }

/* full page */
.qza-app { display: grid; grid-template-columns: 17rem 1fr; gap: 1rem; max-width: 70rem; margin: 0 auto; padding: .5rem 1rem 1.5rem; height: calc(100vh - 9rem); min-height: 28rem; }
.qza-rail { display: flex; flex-direction: column; border: 1px solid var(--qz-line, #ddd); border-radius: .75rem; background: var(--qz-surface, #fff); overflow: hidden; }
.qza-rail-head { padding: .75rem; border-bottom: 1px solid var(--qz-line, #ddd); }
.qza-new { width: 100%; padding: .5rem; border: 1px solid var(--qz-accent, #5b3fa0) !important; border-radius: .5rem; background: transparent !important; color: var(--qz-accent-text, var(--qz-link, #4a2f9a)) !important; cursor: pointer; font: inherit; }
.qza-convs { flex: 1; overflow-y: auto; padding: .375rem; }
.qza-conv { display: flex; align-items: center; gap: .25rem; padding: .375rem .5rem; border-radius: .5rem; cursor: pointer; }
.qza-conv:hover, .qza-conv.on { background: var(--qz-raised, #ecebf2); }
.qza-conv-t { flex: 1; min-width: 0; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qza-conv-d { font-size: .6875rem; color: var(--qz-muted, #666); }
.qza-conv button { opacity: 0; } .qza-conv:hover button, .qza-conv:focus-within button { opacity: 1; }
.qza-main { display: flex; flex-direction: column; border: 1px solid var(--qz-line, #ddd); border-radius: .75rem; background: var(--qz-surface, #fff); min-height: 0; }
.qza-main-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--qz-line, #ddd); }
.qza-main-head h1 { flex: 1; margin: 0; font-size: 1.125rem; }
.qza-app .qza-log { flex: 1; overflow-y: auto; padding: .75rem 1rem; }
.qza-app .qza-compose { padding: .75rem 1rem; border-top: 1px solid var(--qz-line, #ddd); }
.qza-hello { text-align: center; color: var(--qz-muted, #666); padding: 2rem 1rem; }
.qza-hello h2 { color: var(--qz-text, #111); margin: 0 0 .5rem; }
.qza-suggest { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.qza-suggest button { padding: .375rem .75rem; border: 1px solid var(--qz-line, #ccc) !important; border-radius: 1rem; background: var(--qz-page, #fff) !important; color: var(--qz-text, #111) !important; cursor: pointer; font: inherit; font-size: .875rem; }
.qza-note { font-size: .8125rem; color: var(--qz-muted, #666); padding: .5rem .75rem; }
.qza-railbtn { display: none; }
@media (max-width: 760px) {
  .qza-app { grid-template-columns: 1fr; height: calc(100vh - 7rem); }
  .qza-rail { display: none; } .qza-rail.open { display: flex; position: fixed; inset: 4rem 1rem 1rem; z-index: 9100; }
  .qza-railbtn { display: inline-block; }
}

/* model picker + per-answer model line (2026-10-01) */
.qza-model { max-width: 14rem; padding: .25rem .5rem; border: 1px solid var(--qz-line, #ccc); border-radius: .5rem; background: var(--qz-page, #fff); color: var(--qz-text, #111); font: inherit; font-size: .8125rem; }
.qza-model[hidden] { display: none; }
.qza-meta { font-size: .6875rem; color: var(--qz-muted, #666); margin: .15rem .25rem 0; }
.qza-note2 { color: var(--qz-warn, #8a5a08); }

/* the explanation page for visitors without a key (2026-10-13): the chat window look, no script behind it */
.qza-pitch { display: block; max-width: 52rem; margin: 0 auto; height: auto; }
.qza-pitch .qza-log { min-height: 0; overflow: visible; }
.qza-pitch .qza-bubble { max-width: 94%; }
.qza-pitch-actions { align-items: center; gap: .75rem; }
.qza-pitch-actions a { text-decoration: none; display: inline-block; }