/* Chapter image popup (chapter-image.js). Uses tokens/components from ui.css. */

.qciBack { z-index: 260; }
.qci-modal { width: min(440px, 100%); transition: box-shadow .15s ease; }
.qci-modal.is-drag { box-shadow: var(--shadow-pop), 0 0 0 3px var(--focus-line); }

.qci-body { padding: 6px 22px 22px; display: flex; flex-direction: column; gap: 14px; }

.qci-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 0 6px; }
.qci-icon .qicon-fg { background: var(--surface-2); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 12px 28px -14px rgba(16,24,40,.35); }
.qci-icon .qicon-fg img { transition: filter .25s ease, opacity .25s ease; }
.qci-icon.is-busy .qicon-fg img { filter: blur(6px) saturate(.8); opacity: .55; }
.qci-empty { display: inline-flex; color: var(--faint); }
.qci-empty .ic { width: 42px; height: 42px; stroke-width: 1.4; }
.qci-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, var(--shine) 50%, transparent 70%);
  background-size: 250% 100%; animation: qtShimmer 1.4s linear infinite;
}
.qci-busy {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-2);
  font-size: 12px; color: var(--text-2);
}
.qci-busy .spinner { width: 13px; height: 13px; }

.qci-variants { display: flex; justify-content: center; gap: 8px; margin-top: -2px; }
.qci-variant { width: 42px; height: 42px; border-radius: 8px; overflow: hidden; padding: 0; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .12s ease, transform .12s ease; }
.qci-variant img { width: 100%; height: 100%; object-fit: cover; }
.qci-variant:hover { transform: translateY(-1px); }
.qci-variant.on { box-shadow: 0 0 0 2px var(--ink); }

.qci-composer {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.qci-composer:focus-within { background: var(--surface); border-color: var(--focus-line); box-shadow: 0 0 0 4px var(--focus); }
.qci-composer textarea {
  display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent;
  padding: 13px 15px 6px; font-size: 14px; line-height: 1.5; color: var(--text);
}
.qci-composer textarea::placeholder { color: var(--muted); }
.qci-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px 6px; }
.qci-bar .btn-ghost { color: var(--text-2); }
.qci-composer.is-busy textarea { opacity: .6; }

.qci-error { font-size: 12.5px; color: var(--red); text-align: center; margin-top: -4px; }
.qci-use { margin-top: 2px; }