/* ════════════════════════════════════════════════════════════════════════
   study-space-chat.css: Ask AI and Space trading pages
   (public/js/study/study-space-chat.js). Three small pieces:
     1. the chip a page makes on the composer and in the message it was sent in
     2. the picker over the composer ("Add a page from Space" in the + menu)
     3. numbered lists that keep counting through their own bullet sub-items,
        which an answer saved as a page is full of
   Save to Space itself has no styles here: it is a button in the answer's own
   action row, so study-deeptutor-glass.css already dresses it like Copy.
   Tokens come from /css/shared/khio-ui.css, so light and dark follow
   html[data-theme] with nothing to redo here.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. The chips ─────────────────────────────────────────────────────── */
/* On the composer it is the file card the other attachments are (the delete
   button, the border and the dark theme are theirs). The title is a link, and
   the link is the whole card, so its padding is the card's. */
.dt2-pending-doc.dt2-pending-page { padding: 0; }
.dt2-pending-page .ssc-chip-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 34px 9px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.dt2-pending-page .ssc-chip-link:focus-visible { outline: 2px solid var(--k-blue, #0a84ff); outline-offset: -2px; }
.ssc-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: #78716c; }
.ssc-mark svg { width: 20px; height: 20px; }
.ssc-emoji { font-size: 18px; line-height: 1; }
html[data-theme="dark"] .ssc-mark { color: rgba(244, 244, 245, .62); }

/* In the sent message, on the accent bubble, like the document chips there. */
.ssc-sent { display: inline-flex; align-items: center; gap: 8px; margin: 0 6px 4px 0; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24); color: #fff; text-decoration: none; transition: background .14s ease; }
.ssc-sent:hover { background: rgba(255, 255, 255, .26); }
.ssc-sent:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ssc-sent-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #fff; color: #78716c; }
.ssc-sent-mark svg { width: 14px; height: 14px; }
.ssc-sent-mark .ssc-emoji { font-size: 14px; }
.ssc-sent-text { display: flex; flex-direction: column; line-height: 1.15; font-size: 12px; }
.ssc-sent-text b { font-weight: 600; }
.ssc-sent-text i { font-style: normal; font-size: 10px; letter-spacing: .3px; text-transform: uppercase; opacity: .75; }

/* ── 2. The picker ────────────────────────────────────────────────────── */
/* An id, because the app's global field rules use !important and only an id
   beats them. It sits on <body>, over the composer. */
#sscPicker { position: fixed; z-index: 2147483000; display: flex; flex-direction: column; overflow: hidden; background: var(--k-surface); color: var(--k-ink); border: 1px solid var(--k-line); border-radius: 16px; box-shadow: var(--k-shadow); font-family: var(--k-sans); -webkit-font-smoothing: antialiased; transform-origin: bottom left; animation: ssc-in .16s var(--k-ease) both; }
#sscPicker.opens-down { transform-origin: top left; }
#sscPicker * { box-sizing: border-box; }
#sscPicker button { font-family: inherit; }
@keyframes ssc-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #sscPicker { animation: none; } }

#sscPicker .ssc-search { flex: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--k-line); color: var(--k-ink-3); cursor: text; }
#sscPicker .ssc-search svg { width: 16px; height: 16px; }
#sscPicker .ssc-search input,
#sscPicker .ssc-search input:focus { flex: 1; min-width: 0; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; color: var(--k-ink) !important; font: 500 15px var(--k-sans) !important; }
#sscPicker .ssc-search input::placeholder { color: var(--k-ink-3); }

#sscPicker .ssc-list { flex: 1 1 auto; min-height: 0; max-height: 300px; overflow-y: auto; padding: 6px; }
#sscPicker .ssc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 11px; background: none; color: inherit; text-align: left; cursor: pointer; }
#sscPicker .ssc-row.is-active { background: var(--k-hover); }
#sscPicker .ssc-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--k-hover); color: var(--k-ink-2); font-size: 19px; line-height: 1; }
#sscPicker .ssc-row.is-active .ssc-ico { background: color-mix(in srgb, var(--k-ink) 8%, transparent); }
#sscPicker .ssc-ico svg { width: 17px; height: 17px; }
#sscPicker .ssc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#sscPicker .ssc-title { font-size: 14.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sscPicker .ssc-title.is-untitled { color: var(--k-ink-3); font-weight: 500; }
#sscPicker .ssc-snip { font-size: 12.5px; line-height: 1.35; color: var(--k-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sscPicker .ssc-note { padding: 26px 20px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--k-ink-3); }
#sscPicker .ssc-note b { display: block; margin-bottom: 3px; font-size: 15px; font-weight: 600; color: var(--k-ink); }
#sscPicker .ssc-foot { flex: none; padding: 9px 16px 11px; border-top: 1px solid var(--k-line); font-size: 12px; color: var(--k-ink-3); }


/* ── 3. Numbered lists on a page ──────────────────────────────────────── */
/* Quill 1.x counts every ol on its own, and a bullet under a numbered step is a
   ul of its own, so "1. First, two bullets, 2. Second" came out "1. First ...
   1. Second". The count now belongs to the ol that starts a run of them, and
   the ols after it carry it on. A run starts after anything that is not a list,
   and after a bullet list that is not indented (a list of its own, as in
   Markdown). A bullet list that is indented is the sub-list of the step above
   it, so the run goes on through it. (A counter reset on a sibling in between
   does not work: the later ols keep incrementing the earlier one.) */
#view-deeptutor .sp-editor .ql-editor > ol:first-child,
#view-deeptutor .sp-editor .ql-editor > :not(ol):not(ul) + ol,
#view-deeptutor .sp-editor .ql-editor > ul:has(> li:first-child:not([class*="ql-indent"])) + ol { counter-reset: list-0; }