/* What a step read, wrote or brought back, dropped down under its line in the thread (peek.js; Chris, 26 Oct and 6 Nov). */
.pk-step { cursor: pointer; }
.pk-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
/* Only the step's words are the tap, a little taller than the text so a finger finds them; the space beside them stays the chat's. */
.work-step-said.pk-step { padding: 3px 0; }
/* Under the line, at its words' indent (.work-step in panel.css); nothing covers the session. */
.pk-drop { list-style: none; margin: 4px 0 10px; padding-left: 34px; }
.pk-drop-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; min-width: 0; }
.pk-label { color: var(--muted); font-size: 12px; font-weight: 600; margin: 10px 0 4px; }
.pk-drop-box > .pk-label:first-child { margin-top: 2px; }
.pk-label.pk-failed { color: var(--stop); }
.pk-got { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pk-got .pk-label, .pk-got .pk-hint { margin-bottom: 4px; }
/* A long output scrolls in its own box, so the chat is never flooded (Chris, 6 Nov). */
.pk-text { margin: 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); max-height: min(50vh, 440px); overflow: auto; user-select: text; -webkit-user-select: text; }
.pk-text.pk-input { max-height: 9.5em; }
.pk-msg { color: var(--muted); font-size: 12.5px; margin: 2px 0 6px; }
.pk-hint { color: var(--faint); font-size: 12px; margin: 6px 0 0; }
/* Asking the PC: one quiet line that breathes while it waits, still for reduced motion. */
.pk-wait { color: var(--muted); font-size: 12.5px; margin: 0; animation: pk-wait 1.4s ease-in-out infinite; }
@keyframes pk-wait { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .pk-wait { animation: none; } }
.pk-btn { background: none; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 12px; font: inherit; min-height: 36px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.pk-btn.pk-small { min-height: 30px; padding: 3px 10px; font-size: 12.5px; flex: none; }
.pk-btn[hidden] { display: none; }
.pk-btn:disabled { opacity: 0.6; cursor: default; }
/* A picture fitted to the thread; tapped, at its full size in a box of its own that scrolls. */
.pk-image { overflow: auto; max-height: 70vh; border-radius: 8px; touch-action: pan-x pan-y pinch-zoom; cursor: zoom-in; }
.pk-image img { display: block; background: var(--bg); }
.pk-image.fit img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.pk-image:not(.fit) { cursor: zoom-out; }