/* ════════════════════════════════════════════════════════════════════════
   study-page-generate.css: "/ Generate" on a Space page
   (public/js/study/study-page-generate.js). The box sits in the editor's own
   frame (.ql-container), over the spot the draft will take, so it scrolls
   with the page. A waiting draft is marked by a soft tint and a rule at its
   left, drawn behind the words, with Accept, Try again and Discard under it.
   Tokens come from /css/shared/khio-ui.css, so dark mode needs nothing here.
   ════════════════════════════════════════════════════════════════════════ */

.sp-gen { position: absolute; left: -14px; right: -14px; z-index: 6; font-family: var(--k-sans); color: var(--k-ink); }
.sp-gen [hidden], .sp-gen-mark[hidden] { display: none !important; }
.sp-gen button { font-family: inherit; }
.sp-gen svg { flex: none; }

/* One part shows at a time: the ask, Khio writing, or the choices. */
.sp-gen:not([data-state="ask"]) .sp-gen-ask,
.sp-gen:not([data-state="working"]) .sp-gen-busy,
.sp-gen:not([data-state="pending"]) .sp-gen-bar { display: none; }

.sp-gen-card { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--k-surface);
    border: 1px solid color-mix(in srgb, var(--k-blue) 32%, var(--k-line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-blue) 8%, transparent), var(--k-shadow); animation: k-rise .2s var(--k-ease) both; }
/* The ask: a row to type in, and under it, inside the card, a line from Khio when there is one. */
.sp-gen-ask { flex-direction: column; align-items: stretch; gap: 0; }
.sp-gen-row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.sp-gen-ico { flex: none; display: grid; place-items: center; color: var(--k-blue); }
.sp-gen-ico svg { width: 18px; height: 18px; }
/* The app's global field rules use !important; the id is what beats them. */
#view-deeptutor .sp-gen textarea, #view-deeptutor .sp-gen textarea:focus { flex: 1; min-width: 0; height: 24px; max-height: 140px; margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; resize: none;
    color: var(--k-ink) !important; font: 16px/1.5 var(--k-sans) !important; }
#view-deeptutor .sp-gen textarea::placeholder { color: var(--k-ink-3) !important; opacity: 1; }
.sp-gen-send { flex: none; align-self: flex-end; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--k-ink); color: var(--k-paper); cursor: pointer; transition: opacity .15s ease, transform .15s ease; }
.sp-gen-send:disabled { opacity: .25; cursor: default; }
.sp-gen-send:not(:disabled):hover { transform: scale(1.05); }
.sp-gen-send svg { width: 17px; height: 17px; }
.sp-gen-note { margin: 6px 44px 4px 28px; font-size: 14px; line-height: 1.45; color: var(--k-ink-2); }

/* Khio writing: the chat's own quiet pixels and shimmer. */
.sp-gen-busy { justify-content: space-between; padding-right: 10px; }
.sp-gen-busy .bui-shimmer { font-size: 14px; }
.sp-gen-stop { height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--k-ink-2); font: 500 13.5px var(--k-sans); cursor: pointer; }
.sp-gen-stop:hover { background: var(--k-hover); color: var(--k-ink); }

/* The draft, waiting: a soft tint behind its words and a rule at its left. */
.sp-gen-mark { position: absolute; left: -18px; right: -18px; z-index: -1; pointer-events: none; border-radius: 14px; background: color-mix(in srgb, var(--k-blue) 7%, transparent); animation: sp-gen-in .35s var(--k-ease) both; }
.sp-gen-mark::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--k-blue) 70%, transparent); }
@keyframes sp-gen-in { from { opacity: 0; } }

/* The choices, under the draft. */
.sp-gen[data-state="pending"] { left: 0; right: auto; }
.sp-gen-bar { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 13px; background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: var(--k-shadow); animation: k-rise .22s var(--k-ease) both; }
.sp-gen-bar button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--k-ink-2); font: 500 13.5px var(--k-sans); white-space: nowrap; cursor: pointer; transition: background .12s ease, color .12s ease; }
.sp-gen-bar button svg { width: 15px; height: 15px; }
.sp-gen-bar button:hover { background: var(--k-hover); color: var(--k-ink); }
.sp-gen-bar .sp-gen-accept, .sp-gen-bar .sp-gen-accept:hover { background: var(--k-ink); color: var(--k-paper); font-weight: 600; }
.sp-gen-bar .sp-gen-accept:hover { opacity: .88; }
.sp-gen-send:focus-visible, .sp-gen-stop:focus-visible, .sp-gen-bar button:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }

/* The page waits for a choice: nothing on it can change, not even a tick. */
#view-deeptutor .sp-editor .ql-container.sp-gen-locked .ql-editor { cursor: default; }
#view-deeptutor .sp-editor .ql-container.sp-gen-locked .ql-editor ul[data-checked] > li::before { pointer-events: none !important; }

@media (prefers-reduced-motion: reduce) { .sp-gen-card, .sp-gen-bar, .sp-gen-mark { animation: none; } }
@media print { .sp-gen, .sp-gen-mark { display: none !important; } }