/* ════════════════════════════════════════════════════════════════════════
   study-side-chat.css — the look of a chat docked beside a page, in Ask AI's
   own style: its canvas, font, blue question bubbles, plain answers and pill
   composer (study-deeptutor-glass.css). Two chats wear it, so it lives once,
   here, and every rule names both of them:
     .art-*  the Artifacts tutor      public/js/study/study-artifacts.js
     .pc-*   the Co-Writer page chat  public/js/study/study-page-chat.js
   The tutor's class names double as its script's hooks, which is why each
   rule lists the two names instead of both chats sharing one. Where a panel
   sits, how wide it is and how it opens stay in its own stylesheet
   (study-artifacts.css, study-page-chat.css). Ask AI's colours are scoped to
   its view, so they are restated here as --t-*.
   ════════════════════════════════════════════════════════════════════════ */

.art-tutor, .pc-panel {
    --t-bg: var(--dt-glass-bg-color, #f8f8f6); --t-ink: #191a1d; --t-muted: #70747c; --t-line: rgba(22, 24, 28, .10); --t-soft: rgba(22, 24, 28, .05);
    --t-me: #2997ff; --t-send: #2563eb; --t-field: rgba(255, 255, 255, .92);
    background: var(--t-bg); color: var(--t-ink); font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
html[data-theme="dark"] .art-tutor, html[data-theme="dark"] .pc-panel { --t-ink: #f2f2f3; --t-muted: #98999f; --t-line: rgba(255, 255, 255, .11); --t-soft: rgba(255, 255, 255, .07); --t-me: #0a84ff; --t-send: #0a84ff; --t-field: #161618; }

.art-tutor-head, .pc-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 52px; padding: 0 10px 0 18px; }
.art-tutor-name, .pc-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.art-tutor .art-x, .pc-x { background: transparent; color: var(--t-muted); }
.art-tutor .art-x:hover, .pc-x:hover { background: var(--t-soft); color: var(--t-ink); }

.art-tutor-log, .pc-log { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 22px; }
.art-hello, .pc-hello { margin: auto 0; padding: 0 8px; text-align: center; color: var(--t-muted); font-size: 14px; line-height: 1.55; }
.art-hello b, .pc-hello b { display: block; margin-bottom: 6px; color: var(--t-ink); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.art-hello p, .pc-hello p { margin: 0; }
.pc-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.pc-idea { padding: 8px 13px; border: 1px solid var(--t-line, rgba(0,0,0,.1)); border-radius: 999px; background: none; color: var(--t-ink); font: 500 13.5px/1.2 inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.pc-idea:hover { background: color-mix(in srgb, var(--t-ink) 6%, transparent); border-color: color-mix(in srgb, var(--t-ink) 22%, transparent); }
/* A finger needs 44px (the phone tap rule in tests/space-mobile-browser.test.js). */
@media (max-width: 1023px) { .pc-idea { min-height: 44px; } }

.art-turn, .pc-turn { display: flex; flex-direction: column; min-width: 0; animation: k-rise .3s var(--k-ease) both; }
.art-turn.is-me, .pc-turn.is-me { align-items: flex-end; gap: 6px; }
.art-bubble, .pc-bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--t-me); color: #fff; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(0, 64, 128, .16); }
.art-turn-quote, .pc-turn-quote { max-width: 86%; margin: 0; padding: 7px 11px; border-radius: 12px; background: var(--t-soft); color: var(--t-muted); font-size: 13px; line-height: 1.45; }
.art-turn-quote span, .pc-turn-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-turn-err, .pc-turn-err { margin: 0; color: var(--k-bad); font-size: 14px; line-height: 1.5; }
.art-thinking, .pc-thinking { padding: 2px 0; }

/* An answer: Ask AI's .dt2-answer.dt2-md, plain text on the canvas. */
.art-md, .pc-md { font-size: 15px; line-height: 1.7; color: var(--t-ink); overflow-wrap: anywhere; }
.art-md > :first-child, .pc-md > :first-child { margin-top: 0; }
.art-md > :last-child, .pc-md > :last-child { margin-bottom: 0; }
.art-md p, .pc-md p { margin: 0 0 12px; }
.art-md h1, .art-md h2, .art-md h3, .art-md h4, .pc-md h1, .pc-md h2, .pc-md h3, .pc-md h4 { margin: 18px 0 6px; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.art-md h1, .pc-md h1 { font-size: 18px; }
.art-md ul, .art-md ol, .pc-md ul, .pc-md ol { margin: 4px 0 12px; padding-left: 22px; }
.art-md li, .pc-md li { margin: 4px 0; }
.art-md strong, .pc-md strong { font-weight: 700; }
.art-md a, .pc-md a { color: var(--t-send); text-decoration: underline; text-underline-offset: 2px; }
.art-md code, .pc-md code { padding: 2px 6px; border-radius: 4px; background: var(--t-soft); font: 13.5px 'SF Mono', Menlo, Consolas, monospace; }
.art-md pre, .pc-md pre { margin: 10px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--t-line); background: var(--t-soft); overflow-x: auto; }
.art-md pre code, .pc-md pre code { padding: 0; background: none; }
.art-md blockquote, .pc-md blockquote { margin: 10px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--t-line); color: var(--t-muted); }
.art-md table, .pc-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 8px 0 12px; font-size: 13.5px; line-height: 1.45; }
.art-md th, .art-md td, .pc-md th, .pc-md td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--t-line); text-align: left; vertical-align: top; }
.art-md .katex-display, .pc-md .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.art-tutor .art-link, .pc-link { font-size: 13.5px; font-weight: 600; color: var(--t-send); }

.art-tutor-foot, .pc-foot { flex: none; padding: 4px 14px 14px; }
.art-sel, .pc-sel { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 8px 6px 8px 12px; border-radius: 14px; border: 1px solid var(--t-line); background: var(--t-field); color: var(--t-muted); font-size: 13px; line-height: 1.45; }
.art-sel > svg, .pc-sel > svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.art-sel span, .pc-sel span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--t-ink); }
.art-sel .art-x, .pc-sel .pc-x { width: 22px; height: 22px; margin-top: -1px; }
.art-sel .art-x svg, .pc-sel .pc-x svg { width: 14px; height: 14px; }

/* Ask AI's composer: a white pill with a soft shadow that squares off as it
   grows, a blue send button that wakes when there is something to send. */
.art-compose, .pc-compose { display: flex; align-items: flex-end; gap: 8px; padding: 7px 7px 7px 16px; border-radius: 26px; border: 1px solid var(--t-line); background: var(--t-field);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 34px rgba(16, 24, 40, .07); }
.art-compose.is-tall, .pc-compose.is-tall { border-radius: 18px; }
html[data-theme="dark"] .art-compose, html[data-theme="dark"] .pc-compose { border-color: rgba(255, 255, 255, .08); box-shadow: 0 14px 38px rgba(0, 0, 0, .32); }
/* The pill is the box, so the textarea paints nothing: the shell's light
   theme gives every textarea a grey fill and a rust focus ring, !important
   and scoped high (study-themes.css, Inputs), which is why these are
   !important and carry their view's id. */
#view-artifacts .art-compose textarea, #view-artifacts .art-compose textarea:focus,
#view-deeptutor .pc-compose textarea, #view-deeptutor .pc-compose textarea:focus { flex: 1; min-width: 0; height: 24px; max-height: 160px; margin: 0 0 5px; padding: 0; resize: none; font: 500 15px/24px Manrope, Inter, -apple-system, sans-serif;
    border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--t-ink) !important; }
.art-compose textarea::placeholder, .pc-compose textarea::placeholder { color: var(--t-muted); }
.art-send, .pc-send { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--t-send); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(37, 99, 235, .24); transition: opacity .15s ease, transform .15s ease; }
.art-send:hover:not(:disabled), .pc-send:hover:not(:disabled) { transform: translateY(-1px); }
.art-send:disabled, .pc-send:disabled { opacity: .35; cursor: default; box-shadow: none; }
.art-send svg, .pc-send svg { width: 17px; height: 17px; }