/* ════════════════════════════════════════════════════════════════════════
   study-page-chat.css — where the Co-Writer page chat sits and how it opens
   (public/js/study/study-page-chat.js). Its look is study-side-chat.css,
   shared with the Artifacts tutor; only what is the page chat's own is here.
   The panel joins the editor's flex row as its last item (the row is marked
   .pc-row), so the page narrows to make room instead of hiding under it.
   Laptop 380px, wide desktop 440px. On a narrow window it slides over the
   page instead.
   ════════════════════════════════════════════════════════════════════════ */

.pc-row { position: relative; }
.pc-panel { position: relative; z-index: 21; flex: none; display: flex; flex-direction: column; min-height: 0; width: 380px; border-left: 1px solid var(--t-line); animation: pc-in .3s var(--k-ease) both; }
body.khio-desktop-wide .pc-panel { width: 440px; }
.pc-panel[hidden] { display: none; }
@keyframes pc-in { from { opacity: 0; transform: translateX(14px); } }

.pc-x { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none; cursor: pointer; }
.pc-x svg { width: 17px; height: 17px; }

/* Under an edit: what changed lives in the answer above; this line is Undo. */
.pc-edit { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--t-muted); font-size: 13px; }
.pc-edit > svg { width: 14px; height: 14px; }
.pc-link { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.pc-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.pc-link:disabled { color: var(--t-muted); cursor: default; }

@media (max-width: 1023px) {
    .pc-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); box-shadow: -20px 0 50px rgba(0, 0, 0, .14); }
}
/* A printed page is the page alone, like the old AI bar it replaces. */
@media print { .pc-panel { display: none !important; } }