. body needs a *definite* height (not just min-height) here: a flex chain only shrinks/scrolls its content instead of growing the whole page when every ancestor in the chain has a bounded height. Without this, a long prompt/response just grows past the viewport instead of scrolling inside .chat-thread, and toggling the sidebar (which reflows text wrap width) changes content height and so changes the page height too. */ body.container-pg { height: 100vh; overflow: hidden; } .container.container-pg { max-width: 100%; display: flex; flex-direction: column; padding: 1rem 1.5rem; min-height: 0; } .pg-card { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .pg-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding-bottom: .6rem; border-bottom: 1px solid var(--border); margin-bottom: .5rem; flex-shrink: 0; } .pg-header-left { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .pg-header-left h2 { margin: 0; font-size: 1.05rem; } .pg-header-left code { font-size: .72rem; } .pg-header-right { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; } .pg-header-right .segmented { margin-right: .35rem; } .pg-main { display: grid; grid-template-columns: 1fr auto; gap: 0; flex: 1; min-height: 0; overflow: hidden; transition: grid-template-columns .25s ease; } .pg-chat-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; position: relative; padding-right: 1rem; } .pg-sidebar { width: 280px; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; border-left: 1px solid var(--border); padding-left: 1rem; transition: width .25s ease, padding .25s ease, border .25s ease; } .pg-sidebar h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .85rem 0 .35rem; } .pg-sidebar h3:first-child { margin-top: 0; } .pg-sidebar label { font-size: .82rem; } .pg-sidebar input[type="number"], .pg-sidebar input[type="text"], .pg-sidebar select { font-size: .82rem; padding: .3rem .5rem; } .pg-sidebar input[type="range"] { width: 100%; accent-color: var(--accent); display: block; margin-top: .2rem; } .pg-sidebar textarea { /* Unlike the param inputs above, #system-prompt isn't wrapped in a (it follows a standalone

), so it misses the shared `label textarea` base styling and needs it restated here. / display: block; width: 100%; font-size: .82rem; padding: .35rem .5rem; min-height: 60px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; } .pg-sidebar textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .pg-sidebar-closed .pg-sidebar { width: 0; padding-left: 0; border-left: none; overflow: hidden; } .pg-sidebar-closed .pg-main { grid-template-columns: 1fr 0; } #sidebar-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1; padding: .3rem .45rem; color: var(--muted); transition: color .15s; } #sidebar-toggle:hover { color: var(--text); } / ── Input area ─────────────────────────────────────────────────────── / .pg-input-area { display: flex; gap: .5rem; align-items: flex-end; margin-top: auto; flex-shrink: 0; } .pg-input-area textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; font-size: .9rem; padding: .55rem .75rem; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; } .pg-input-area textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } / Token estimate sits in its own row so it never fights the textarea/send button for width as the message grows. / .pg-input-meta { display: flex; justify-content: flex-end; flex-shrink: 0; margin-top: .3rem; } .pg-input-area .pg-send-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s; } .pg-send-btn:disabled { opacity: .45; cursor: not-allowed; } .pg-send-btn:not(:disabled):hover { opacity: .85; } / Restart-in-progress state: spinner + a text label ("Restarting model…") don't fit in a fixed 44px circle — flexbox squishes the spinner's width to make room, flattening it into an oval. Widen into a pill instead. / .pg-send-btn.pg-send-btn-wide { width: auto; height: 32px; border-radius: 999px; padding: 0 .9rem; font-size: .8rem; gap: .4rem; white-space: nowrap; } / Responsive: stack sidebar below chat on narrow screens / @media (max-width: 768px) { / Sidebar stacks below the chat here instead of scrolling internally side-by-side, so give up the fixed-viewport/internal-scroll trick and let the page scroll normally like everywhere else. / body.container-pg { height: auto; overflow: visible; } .container.container-pg { padding: .5rem .75rem 1.5rem; } .pg-card { flex: none; min-height: auto; } .pg-main { grid-template-columns: 1fr; } .pg-chat-panel { padding-right: 0; min-height: 60vh; } .pg-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: .75rem; margin-top: .5rem; max-height: 40vh; } .pg-sidebar-closed .pg-sidebar { width: 100%; padding-top: 0; margin-top: 0; border-top: none; } .pg-header-right .segmented { display: none; } .pg-header { gap: .4rem; } } .pg-attach-row { display: flex; gap: .4rem; flex-shrink: 0; margin-bottom: .4rem; } .pg-attach-row .pg-image-thumbs, .pg-attach-row .pg-file-chips { width: auto; flex: 1; } / ── Drop zone overlay ──────────────────────────────────────────────── / .pg-drop-zone { display: none; position: absolute; inset: 0; z-index: 20; background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent); border: 2px dashed var(--accent, #6366f1); border-radius: 12px; pointer-events: none; align-items: center; justify-content: center; flex-direction: column; gap: .5rem; } .pg-drop-zone.active { display: flex; } .pg-drop-icon { font-size: 2.4rem; opacity: .7; } .pg-drop-text { font-size: .95rem; font-weight: 600; color: var(--accent); } .pg-drop-sub { font-size: .78rem; color: var(--muted); } / ── Playground toolbar / mode toggle ────────────────────────────────── / .pg-toolbar { display: flex; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; align-items: center; } .pg-toolbar select { width: auto; } .segmented { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; } .segmented-btn { border: none; background: transparent; color: var(--muted); font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .segmented-btn.active { background: var(--accent); color: #fff; } .segmented-btn:not(.active):hover { background: var(--panel); } / ── Playground chat thread ──────────────────────────────────────────── / .chat-thread { flex: 1; margin-bottom: .5rem; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: .85rem; background: var(--panel-2); min-height: 0; } .chat-msg { display: flex; gap: .6rem; margin-bottom: .75rem; align-items: flex-start; } .chat-msg:last-child { margin-bottom: 0; } .chat-msg-user { justify-content: flex-end; } .chat-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .chat-bubble { max-width: 80%; border-radius: 10px; padding: .5rem .75rem; } .chat-bubble-assistant { background: var(--panel); border: 1px solid var(--border); } .chat-bubble-user { background: var(--accent-soft, var(--panel)); } .chat-msg-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; } .chat-msg-user .chat-msg-head { justify-content: flex-end; } .chat-role-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); } .chat-msg-body { font-size: .9rem; line-height: 1.45; word-wrap: break-word; } .chat-msg-actions { display: flex; gap: .6rem; margin-top: .35rem; } .chat-msg-user .chat-msg-actions { justify-content: flex-end; } .chat-msg-action { background: none; border: none; padding: 0; font-size: .68rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .chat-msg-action:hover { color: var(--text); } .chat-stream-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: chat-stream-pulse 1.1s ease-in-out infinite; } @keyframes chat-stream-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .pg-generate-row { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; } .pg-token-counter { font-size: .78rem; color: var(--muted); } .pg-chip-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; } .pg-chip { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px; font-size: .78rem; padding: .3rem .8rem; cursor: pointer; transition: background .15s ease; } .pg-chip:hover { background: var(--panel); } .pg-inline-bench { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; font-size: .8rem; color: var(--muted); flex-shrink: 0; } .pg-inline-bench strong { color: var(--text); } .pg-image-attach { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; } .pg-image-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; } .pg-image-thumb { position: relative; width: 64px; height: 64px; } .pg-image-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); } .pg-image-thumb-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: var(--danger, #dc2626); color: #fff; font-size: .7rem; cursor: pointer; border: 2px solid var(--panel); } .chat-msg-body img.pg-chat-img { max-width: 200px; max-height: 200px; border-radius: 8px; display: block; margin-top: .4rem; } .pg-file-chips { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; } .pg-file-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--border); background: var(--panel-2); border-radius: 999px; padding: .3rem .5rem .3rem .7rem; font-size: .8rem; } .pg-file-chip-remove { cursor: pointer; border-radius: 50%; width: 16px; height: 16px; line-height: 16px; text-align: center; background: var(--danger, #dc2626); color: #fff; font-size: .65rem; } .chat-msg-body .pg-chat-file-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border); background: var(--panel-2); border-radius: 6px; padding: .2rem .5rem; font-size: .8rem; margin-top: .3rem; } / Markdown rendering in chat messages and response panel / .chat-msg-body pre, #response pre { background: var(--panel); border-radius: 6px; padding: .75rem 1rem; overflow-x: auto; margin: .5rem 0; font-size: .875rem; line-height: 1.5; } .chat-msg-body code, #response code { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: .875rem; } .chat-msg-body :not(pre) > code, #response :not(pre) > code { background: var(--panel); padding: .15em .35em; border-radius: 3px; } .chat-msg-body ul, .chat-msg-body ol, #response ul, #response ol { padding-left: 1.5rem; margin: .4rem 0; } .chat-msg-body li, #response li { margin: .15rem 0; } .chat-msg-body h2, .chat-msg-body h3, .chat-msg-body h4, #response h2, #response h3, #response h4 { margin: .75rem 0 .25rem; font-weight: 600; } .chat-msg-body a, #response a { color: var(--accent); } .chat-msg-body strong, #response strong { font-weight: 600; } .kv { display: flex; justify-content: space-between; padding: 0.2rem 0; font-size: 0.9rem; } .kv .k { color: var(--muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.15rem 1.5rem; margin: 0 0 0.75rem; } .kv-grid .kv { border-bottom: 1px dashed var(--border); } .metrics-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .details-toggle .details-caret { display: inline-block; transition: transform 0.15s ease; } .details-toggle.open .details-caret { transform: rotate(180deg); } / ── Status timeline (model request review) ─────────────────────────── / .status-timeline { display: flex; align-items: flex-start; gap: 0; margin: 0.75rem 0 1rem; } .status-timeline .tl-step { flex: 1; text-align: center; position: relative; font-size: 0.75rem; color: var(--muted); } .status-timeline .tl-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--border); margin: 0 auto 0.3rem; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--muted); } .status-timeline .tl-step::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; } .status-timeline .tl-step:first-child::before { display: none; } .status-timeline .tl-step.done .tl-dot { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); } .status-timeline .tl-step.done::before { background: var(--ok); } .status-timeline .tl-step.current .tl-dot { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); } .status-timeline .tl-step.rejected .tl-dot { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); } .status-timeline .tl-step.rejected::before { background: var(--bad); } .status-timeline .tl-step.done span, .status-timeline .tl-step.current span { color: var(--text); font-weight: 600; } .status-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 0.35rem; } .status-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .status-dots .dot.done { background: var(--ok); } .status-dots .dot.rejected { background: var(--bad); } / The stage the request is currently at (or stopped at) — shown next to the dots so the pipeline position is legible without hovering. / .status-step-label { font-size: 0.72rem; color: var(--muted); margin-left: 0.35rem; vertical-align: middle; } .status-step-label.rejected { color: var(--bad); } .big { font-size: 2.2rem; font-weight: 700; margin: 0.25rem 0; letter-spacing: -0.02em; } / ── Tables ──────────────────────────────────────────────────────────── / table { width: 100%; border-collapse: collapse; min-width: 0; } th, td { text-align: left; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: top; white-space: nowrap; } td { white-space: normal; } th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; } tbody tr:hover { background: var(--panel-2); } tbody tr:last-child td { border-bottom: none; } / ── Forms ───────────────────────────────────────────────────────────── / label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--muted); } label input, label select, label textarea { display: block; width: 100%; margin-top: 0.3rem; padding: 0.55rem 0.7rem; background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 0.95rem; font-family: inherit; } label input:focus, label select:focus, label textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1rem; height: 1rem; } textarea { resize: vertical; min-height: 6rem; } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; } .checkbox-label input { display: inline-block; width: auto; margin: 0; } button, .btn { display: inline-block; padding: 0.5rem 1rem; background: var(--accent); color: #fff; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 0.88rem; font-weight: 600; font-family: inherit; transition: filter 0.12s ease; } button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; } button:disabled { opacity: 0.5; cursor: not-allowed; } / Components that style their own