/* «افتح كمبيوترك في صفحة الشات» (public/chat-screen.js, owner voice msg bffd596c): the supervisor chat hides its messages and
   composer and the supervisor's live computer fills the pane. Layout only: the pane reads the --csp-* tokens (built on --sec-*
   and --btn-*); the back button and the viewer chips are the standard .icon-btn.bar (v440, msg 7eacd150) and the viewer is the shared .vr-scr from styles-3.css. */
/* v439 (15699e5b): the composer (.comp) stays under the picture so he can write to the supervisor while he watches */
main.chat.csp-on > :not(.ch-h):not(.csp):not(.comp){display:none}
main.chat.csp-on > .comp{flex:none}
.csp{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--csp-bar-gap);padding:calc(var(--csp-head) + var(--st, 0px)) var(--csp-pad) var(--csp-pad-b);background:var(--csp-bg);color:var(--csp-ink);animation:cspin .2s ease}
.csp-back{position:relative}
.csp-back.csp-new{border-color:var(--csp-new)}
/* v440 (msg 7eacd150): the back button's tiny count of new replies */
.csp-n{position:absolute;top:-4px;inset-inline-end:-4px;min-width:var(--csp-n);height:var(--csp-n);padding:0 3px;border-radius:var(--radius-pill);background:var(--csp-n-bg);color:var(--csp-n-ink);font-size:var(--csp-n-fs);font-style:normal;font-weight:var(--fw-bold);line-height:var(--csp-n);text-align:center;pointer-events:none}
.csp-n[hidden]{display:none}
/* v440: the status line folded into the icon row: live dot + one small ellipsis line, takes whatever space the icons leave */
.csp-line{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-1);margin:0;padding:0 var(--space-1);color:var(--csp-ink2);font-size:var(--csp-line-fs)}
.csp-lt{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csp-live{width:var(--csp-dot);height:var(--csp-dot);border-radius:50%;flex:none;background:var(--csp-live);animation:cspp 1.2s ease-in-out infinite}
/* the chat header floats over the pane (.ch-h is absolute), so the pane starts below it; the viewer's chips sit above the picture so
   the floating tools button never covers them */
.csp > .vr-scr{flex:1;min-height:0;margin:0}
.csp .vr-sbar{order:-1}
.csp .vr-sv{flex:1;min-height:0;background:var(--csp-view-bg);border-color:var(--csp-border);border-radius:var(--csp-radius)}
.csp .vr-sv img{max-height:100%}
/* the newest chat message, one line above the composer; tap = back to the chat */
.csp-last{flex:none;display:block;width:100%;margin:0;padding:var(--csp-last-pad);border:.5px solid var(--csp-border);border-radius:var(--csp-radius);background:var(--csp-last-bg);color:var(--csp-ink);font:inherit;font-size:var(--fs-xs);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.csp-last[hidden]{display:none}
.csp-last.csp-new{border-color:var(--csp-new)}
@keyframes cspin{from{opacity:0}}
@keyframes cspp{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.csp,.csp-live{animation:none}}