/*
 * pcu-bot-ui — the KI-Assistenz window, the port of pc-botui.
 *
 * HUMAN-OWNED. Since 2026-09-30 this is the stylesheet of the product shell, not of a mock-up:
 * the logic of `BotUI.ts` was copied into `PcuBotUi.ts` and only the rendering was rebuilt.
 * `BotUI.css` (2,767 lines) stays with the old shell and is deprecated with it; only what the
 * kept features need was ported here, rewritten on tokens.
 *
 * Two rules keep it from drifting:
 *
 * 1. ONLY `--uui-*`. No literal colour, radius, shadow or spacing value, and no `--rd-*`: this
 *    component must follow whichever UUI theme its page carries, including `.uui-legacy`, which
 *    is how it is meant to look inside today's platform. The one exception is the legacy widget
 *    `pc-super-input` inside the composer, which brings its own `rd-*` stylesheet and is only
 *    nudged here (border, background) so it sits in the frame.
 * 2. LAYOUT ONLY where a component exists. Buttons, menu, select, badges, alerts are `uui-*`.
 *    What is drawn here is what Untitled UI has no component for: the window, the bubbles, the
 *    intro screen, the feedback strip, the two seams.
 *
 * Source: Figma PGMGtwvwHW4OpGoP0CQjV6, frames 7259:3091 / 3125 / 3158 / 3262.
 */

/* ------------------------------------------------------------------- Host */

/*
 * In flow (the catalogue) the host takes its parent's width. Docked (the product) it is the
 * window's outer box: fixed to the right edge, full height, as wide as the customer made it.
 * The width lives in a custom property because the edge drag writes it sixty times a second
 * and must not go through a re-render; the component commits the number on release.
 */
pcu-bot-ui {
    display: block;
    inline-size: 100%;
}

/*
 * Local shell override: generated UUI variants otherwise win by attribute specificity.
 * Dropdown rows and the dropdown triggers inside workbench devices keep Core 27's own radii
 * (rows 6px, an open icon trigger 4px): the 24px pill is the shell's button shape, not theirs
 * (2026-11-02, Figma `Dropdown menu` 3281:383083).
 */
pcu-bot-ui button:not(.uui-dropdown-menu__menu button, .pcu-bot-ui__panels .uui-dropdown-menu__trigger) {
    --uui-stroke-radius: var(--uui-radius-4xl) !important;
    border-radius: var(--uui-radius-4xl) !important;
}

/*
 * Docked means floating at the right edge, not glued to it. Measured in Figma
 * (`min-version-chat` 7259:3091, `min-version-artefact` 7259:3158): the panel keeps 24px to
 * the right and bottom edges and starts 128px from the top — the page header plus the same
 * 24px — and keeps its rounded corners. Edge to edge with square corners was the first
 * reading of "right dock, full height" and was wrong (owner, 2026-09-30).
 */
pcu-bot-ui[dock="right"] {
    /*
     * Figma's 128 / 24 was one 24px step too low on the real page (owner, 2026-09-30): the
     * window sits 104px from the top — the 90px header plus a breath — and 48px from the bottom,
     * the same height as drawn, just higher.
     */
    --pcu-bot-ui-dock-inset-top: 104px;
    position: fixed;
    z-index: 900;
    inset-block-start: var(--pcu-bot-ui-dock-inset-top);
    inset-block-end: var(--uui-spacing-12);
    inset-inline-end: var(--uui-spacing-6);
    inline-size: var(--pcu-bot-ui-dock-width, 450px);
    max-inline-size: calc(100vw - var(--uui-spacing-6) * 2);
}

pcu-bot-ui.pcu-bot-ui--resizing {
    user-select: none;
}

/* ------------------------------------------------------------------ Frame */

/*
 * Figma draws the panel at 1240×800 inside a 1920×1080 page. Both are caps rather than fixed
 * sizes in flow; docked, the frame is the host and fills it edge to edge.
 */
/*
 * Two rows, always: the top block (title bar plus the optional upsell banner, wrapped so the
 * banner's presence cannot shift the panes into an `auto` row) and the panes, which take the
 * rest. The edge handle is absolutely positioned and takes no row.
 */
.pcu-bot-ui__root {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    box-sizing: border-box;
    inline-size: min(100%, 1240px);
    block-size: min(80vh, 800px);
    overflow: hidden;
    border: 1px solid var(--uui-border-secondary);
    /* Figma: 24px on the chat-only panel and the maximised window, 16px once the workbench widens it. */
    border-radius: var(--uui-radius-4xl);
    color: var(--uui-text-primary);
    background: var(--uui-bg-primary);
    box-shadow: var(--uui-shadow-xl);
}

.pcu-bot-ui__root[data-workbench]:not(.pcu-bot-ui__root--max) {
    border-radius: var(--uui-radius-2xl);
}

/* Docked, the frame fills the host; border, radius and shadow stay — it is a window, not a pane. */
pcu-bot-ui[dock="right"] .pcu-bot-ui__root {
    inline-size: 100%;
    block-size: 100%;
}

/*
 * Maximised is the 1872×1032 frame: the window keeps a margin rather than going edge to edge.
 * `fixed` is what makes it a real overlay; the one place this component positions its root.
 */
.pcu-bot-ui__root--max,
pcu-bot-ui[dock="right"] .pcu-bot-ui__root--max {
    position: fixed;
    z-index: 900;
    inset: var(--uui-spacing-6);
    inline-size: auto;
    block-size: auto;
}

/* ------------------------------------------------------------- Docked edge */

/*
 * The grab handle on the window's left edge. Same construction as the splitter: a hit area
 * wide enough to catch with a hairline drawn in it, `touch-action: none` so a drag survives
 * on touch screens.
 */
.pcu-bot-ui__edge {
    position: absolute;
    z-index: 2;
    inset-block: 0;
    inset-inline-start: calc(var(--uui-spacing-1) * -1);
    inline-size: var(--uui-spacing-2);
    cursor: col-resize;
    touch-action: none;
}

.pcu-bot-ui__edge::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    background: transparent;
}

.pcu-bot-ui__edge:hover::before,
.pcu-bot-ui__edge:focus-visible::before,
.pcu-bot-ui--resizing .pcu-bot-ui__edge::before {
    inline-size: 2px;
    background: var(--uui-border-brand);
}

.pcu-bot-ui__edge:focus-visible {
    outline: none;
}

/* Keep device controls inside the workbench below the header menus. */
.pcu-bot-ui__top {
    position: relative;
    z-index: 2;
}
.pcu-bot-ui__panes {
    isolation: isolate;
}

/*
 * A workbench device's modal overlay is fixed, but stays inside the panes' and workbench's
 * stacking contexts. While one is open, lift both above the title bar and the splitter so the
 * scrim covers the whole window and only the dialog stays in front.
 */
.pcu-bot-ui__panes:has(.uui-modal-overlay__stage) {
    z-index: 3;
}

.pcu-bot-ui__panes:has(.uui-modal-overlay__stage) > .pcu-bot-ui__workbench {
    z-index: 2;
}
/* --------------------------------------------------------------- Title bar */

.pcu-bot-ui__bar {
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-3);
    padding: var(--uui-spacing-3) var(--uui-spacing-5);
    border-block-end: 1px solid var(--uui-border-secondary);
}

.pcu-bot-ui__mascot {
    inline-size: var(--uui-spacing-6);
    block-size: var(--uui-spacing-6);
    object-fit: contain;
}

/* The bar is the container the selector measures against; the identity yields, the actions never do. */
.pcu-bot-ui__bar {
    container-type: inline-size;
}

.pcu-bot-ui__identity {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.pcu-bot-ui__identity p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcu-bot-ui__status[data-active] {
    color: var(--uui-text-brand-secondary);
}

.pcu-bot-ui__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--uui-spacing-1);
    margin-inline-start: auto;
    min-inline-size: 0;
}

/*
 * The bot selector must not push the buttons off the bar: in the 450px chat-only window it
 * shrinks to a stub and ellipsises its label (it is an admin tool, the label is secondary).
 * The primitive carries Figma's 320px on its root; the consumer releases it, as the handbook says.
 */
.pcu-bot-ui__bot-select {
    flex: 0 1 auto;
    min-inline-size: 0;
    inline-size: clamp(112px, 30cqi, 320px);
}

/*
 * The generated rules carry the 320px on root, field and input and are keyed over four
 * attributes; two classes cannot outrank them, so this is the documented `!important`
 * exception (traps.md). Measured 2026-09-30: without it the field ran under the buttons.
 */
.pcu-bot-ui__bot-select .uui-select__root,
.pcu-bot-ui__bot-select .uui-select__field,
.pcu-bot-ui__bot-select .uui-select__input {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

.pcu-bot-ui__bot-select .uui-select__content,
.pcu-bot-ui__bot-select .uui-select__value-wrap,
.pcu-bot-ui__bot-select .uui-select__value {
    flex: 1 1 auto;
    min-inline-size: 0 !important;
    inline-size: auto !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pcu-bot-ui__menu {
    --uui-dropdown-max-height: min(var(--pcu-bot-menu-height, 75dvh), 640px);
}

.pcu-bot-ui__menu--recent {
    --uui-dropdown-preferred-width: min(560px, calc(100cqw - 80px));
}

.pcu-bot-ui__menu--recent .uui-dropdown-menu-item__icon-text {
    min-width: 0;
}

.pcu-bot-ui__menu--recent .uui-dropdown-menu-item__label {
    overflow: hidden;
    text-overflow: ellipsis;
    /* The generated item rule uses three attribute selectors. */
    white-space: nowrap !important;
    min-width: 0;
}

/*
 * The icon-simple trigger is Figma's bare 20×20 icon and its generated rule resets neither
 * `display` nor `padding` — so on a product page the site's global `button` padding (5px 10px)
 * pushes the icon out of that box to the bottom right, while the utility buttons beside it
 * centre their 20px icon in a 32px box. Measured 2026-09-30: dots at y+5/x+10, the others at
 * +6/+6. Give the trigger the same 32px box and centre it, so all four icons share one
 * baseline and one pitch (Figma: 20px icons, 40px apart). `!important` against the
 * three-attribute generated rule, the documented exception.
 */
.pcu-bot-ui__menu .uui-dropdown-menu__trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    inline-size: var(--uui-spacing-8) !important;
    block-size: var(--uui-spacing-8) !important;
    padding: 0 !important;
    margin: 0;
    line-height: 0;
    border-radius: var(--uui-radius-sm);
}

.pcu-bot-ui__debug-badge {
    padding: var(--uui-spacing-0-5) var(--uui-spacing-2);
    border: 1px dashed var(--uui-border-secondary);
    border-radius: var(--uui-radius-full);
    color: var(--uui-text-tertiary);
    background: transparent;
    font-family: var(--uui-font-family, inherit);
    white-space: nowrap;
    cursor: pointer;
}

.pcu-bot-ui__debug-badge:hover,
.pcu-bot-ui__debug-badge[data-copied] {
    border-style: solid;
    color: var(--uui-text-brand-secondary);
    border-color: var(--uui-border-brand);
}

/* The upsell banner is a legacy widget; it only gets its row. */
.pcu-bot-ui__upsell {
    display: block;
    border-block-end: 1px solid var(--uui-border-secondary);
}

/* ------------------------------------------------------------------ Panes */

/*
 * Three tracks: chat, splitter, workbench. The workbench carries the measured width because
 * collapsing it walks that track to zero, and a track only interpolates against a track of the
 * same type — `790px → 0px` does, `1fr → 0px` does not.
 */
.pcu-bot-ui__panes {
    /* Match clampChatWidth(): useful desktop minima, capped for smaller containers. */
    --pcu-bot-ui-workbench-width: clamp(
        min(50%, max(320px, 20%)),
        calc(100% - var(--pcu-bot-ui-chat-width, 50%)),
        calc(100% - min(320px, 50%))
    );
    display: grid;
    /* The 8px drag target overlaps the seam; it consumes no track width. */
    grid-template-columns:
        minmax(0, 1fr)
        0
        var(--pcu-bot-ui-workbench-width);
    /*
     * Two rows shared by both panes through subgrid: the content and the footer. That is what
     * makes the chat's composer and the workbench's footer one row of one height with one top
     * border — Figma draws them as two 88px frames on the same baseline, and no amount of
     * matching paddings would keep them aligned once the disclaimer wraps.
     */
    grid-template-rows: minmax(0, 1fr) auto;
    min-block-size: 0;
    /*
     * No CSS transition here: showing and hiding the workbench is a view transition since
     * 2026-09-30 (owner decision; the earlier CSS transition existed because a snapshot cannot
     * re-wrap text — that dissolve is now accepted). A CSS transition underneath a view
     * transition would animate the live DOM behind the new snapshot and fight it.
     */
}

.pcu-bot-ui__panes--chat {
    --pcu-bot-ui-workbench-width: 0px;
}

/* Reverse the tracks without remounting devices or changing their state. */
pcu-bot-ui[workbench-position="left"] .pcu-bot-ui__panes {
    grid-template-columns:
        var(--pcu-bot-ui-workbench-width)
        0
        minmax(0, 1fr);
}

pcu-bot-ui[workbench-position="left"] .pcu-bot-ui__workbench { order: 0; }
pcu-bot-ui[workbench-position="left"] .pcu-bot-ui__splitter { order: 1; }
pcu-bot-ui[workbench-position="left"] .pcu-bot-ui__chat { order: 2; }

/* An embedded workspace must remain visible even when two columns no longer fit. */
@media (max-width: 760px) {
    pcu-bot-ui[workbench-always-open] .pcu-bot-ui__panes {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    }

    pcu-bot-ui[workbench-always-open] .pcu-bot-ui__chat {
        grid-row: 2;
        grid-template-rows: minmax(0, 1fr) auto;
        min-block-size: 0;
    }

    pcu-bot-ui[workbench-always-open] .pcu-bot-ui__workbench {
        grid-row: 1;
        grid-template-rows: minmax(0, 1fr) auto;
        min-block-size: 0;
    }

    pcu-bot-ui[workbench-always-open] .pcu-bot-ui__splitter {
        display: none;
    }
}

/* --------------------------------------------------------------- Splitter */

.pcu-bot-ui__splitter {
    position: relative;
    /* Keep the divider and drag target above the overlapping pane backgrounds. */
    z-index: 1;
    grid-row: 1 / 3;
    inline-size: var(--uui-spacing-2);
    margin-inline: calc(var(--uui-spacing-1) * -1);
    cursor: col-resize;
    touch-action: none;
}

.pcu-bot-ui__panes--chat .pcu-bot-ui__splitter {
    inline-size: 0;
    margin-inline: 0;
    pointer-events: none;
}

.pcu-bot-ui__splitter::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    background: var(--uui-border-secondary);
}

.pcu-bot-ui__splitter:hover::before,
.pcu-bot-ui__splitter:focus-visible::before {
    inline-size: 2px;
    background: var(--uui-border-brand);
}

.pcu-bot-ui__splitter:focus-visible {
    outline: none;
}

/* ------------------------------------------------------------------- Chat */

/*
 * The chat is a column of messages and the composer. The composer is a row of THIS section —
 * which is what keeps it under the chat pane and never across the window (Figma's detail).
 */
.pcu-bot-ui__chat {
    display: grid;
    grid-row: 1 / 3;
    grid-template-rows: subgrid;
    min-inline-size: 0;
}

/* Figma `chat-body`: 24 / 16 padding, 16 between bubbles. */
.pcu-bot-ui__messages {
    display: flex;
    flex-direction: column;
    gap: var(--uui-spacing-4);
    overflow-y: auto;
    padding: var(--uui-spacing-6) var(--uui-spacing-4);
}

.pcu-bot-ui__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uui-spacing-2);
    flex: 1;
}

/* ----------------------------------------------------------- Intro screen */

.pcu-bot-ui__intro {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--uui-spacing-4);
    padding: var(--uui-spacing-5);
}

/* No overflow:hidden — the Lottie intro swings the mascot in from outside its 275×170 box. */
.pcu-bot-ui__intro-animation {
    display: flex;
    justify-content: center;
    max-inline-size: 275px;
    max-block-size: 170px;
    overflow: visible;
}

.pcu-bot-ui__intro-mascot {
    max-inline-size: 100%;
    max-block-size: 170px;
    object-fit: contain;
}

.pcu-bot-ui__intro-greeting {
    margin: 0;
    color: var(--uui-text-brand-secondary);
    text-align: center;
    white-space: pre-line;
}

.pcu-bot-ui__intro-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--uui-spacing-2);
}

/* A suggestion is a chip the user sends; it is not a form control, so it is drawn here. */
.pcu-bot-ui__intro-suggestion {
    flex: 1 1 auto;
    min-inline-size: 120px;
    padding: var(--uui-spacing-3) var(--uui-spacing-4);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-full);
    color: var(--uui-text-secondary);
    background: var(--uui-bg-secondary);
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.pcu-bot-ui__intro-suggestion:hover {
    background: var(--uui-bg-secondary-hover, var(--uui-bg-tertiary));
}

/* --------------------------------------------------------------- Messages */

/*
 * Figma `ChatBubble`: the user's grey (#f3f4f6), right-aligned, at most ~72 % of the column,
 * 12px corners with a 2px tail at the bottom right; the bot's white with a hairline border,
 * left-aligned, tail at the bottom left. 8 / 12 padding, 14/21 text. No avatar, no sender line.
 */
.pcu-bot-ui__message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uui-spacing-1);
    inline-size: 100%;
    animation: pcu-bot-ui-message-in 200ms ease-out;
}

@keyframes pcu-bot-ui-message-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pcu-bot-ui__message--user {
    align-items: flex-end;
}

/* Figma's 12px has no token (`lg` is 10, `2xl` 16); `lg` it is, and the tail is the square corner. */
.pcu-bot-ui__message-content {
    box-sizing: border-box;
    max-inline-size: 100%;
    padding: var(--uui-spacing-2) var(--uui-spacing-3);
    border-radius: var(--uui-radius-lg);
    line-height: 1.5;
    text-align: start;
    overflow-wrap: anywhere;
}

.pcu-bot-ui__message--user .pcu-bot-ui__message-content {
    max-inline-size: 72%;
    background: var(--uui-bg-tertiary);
    border-end-end-radius: var(--uui-radius-none);
}

.pcu-bot-ui__message--assistant .pcu-bot-ui__message-content {
    border: 1px solid var(--uui-border-secondary);
    background: var(--uui-bg-primary);
    border-end-start-radius: var(--uui-radius-none);
}

/* System and developer messages, debug mode only: visibly not part of the conversation. */
.pcu-bot-ui__message--system .pcu-bot-ui__message-content {
    border: 1px dashed var(--uui-border-secondary);
    background: var(--uui-bg-tertiary);
    color: var(--uui-text-tertiary);
    font-family: var(--uui-font-family-mono, monospace);
}

.pcu-bot-ui__root[data-large-font] .pcu-bot-ui__message-content {
    font-size: var(--uui-font-size-text-md, 1rem);
}

.pcu-bot-ui__thinking {
    display: inline-flex;
    align-items: center;
    gap: var(--uui-spacing-2);
    font-style: italic;
}

.pcu-bot-ui__thinking .rd-spinner {
    inline-size: 16px;
    block-size: 16px;
}

/*
 * Quick replies inside the latest answer. Inactive on older answers — the conversation has
 * moved on — so they read as text, not as buttons.
 */
.pcu-bot-ui__message--assistant .pcu-bot-ui__message-content a[href^="#reply:"] {
    display: inline-flex;
    align-items: center;
    margin: var(--uui-spacing-1) var(--uui-spacing-1) 0 0;
    padding: var(--uui-spacing-1) var(--uui-spacing-3);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-full);
    color: var(--uui-text-tertiary);
    background: var(--uui-bg-primary);
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}

.pcu-bot-ui__message[data-replies-active] .pcu-bot-ui__message-content a[href^="#reply:"] {
    border-color: var(--uui-border-brand);
    color: var(--uui-text-brand-secondary);
    cursor: pointer;
    pointer-events: auto;
}

.pcu-bot-ui__message[data-replies-active] .pcu-bot-ui__message-content a[href^="#reply:"]:hover,
.pcu-bot-ui__message[data-replies-active] .pcu-bot-ui__message-content a[href^="#reply:"]:focus {
    background: var(--uui-bg-brand-primary);
}

/* --------------------------------------------------------------- Feedback */

/* Under the bot's bubble, where Figma puts the thumbs (4px below). */
.pcu-bot-ui__feedback {
    display: flex;
    gap: var(--uui-spacing-0-5);
    margin-block-start: var(--uui-spacing-1);
}

/* Older answers show their thumbs on hover only (Figma note on 7292:1475); touch has no hover. */
@media (hover: hover) {
    .pcu-bot-ui__message:not([data-latest-answer]) .pcu-bot-ui__feedback {
        opacity: 0;
        pointer-events: none;
    }

    .pcu-bot-ui__message:not([data-latest-answer]):hover .pcu-bot-ui__feedback,
    .pcu-bot-ui__message:not([data-latest-answer]):focus-within .pcu-bot-ui__feedback {
        opacity: 1;
        pointer-events: auto;
    }
}

/* The thumb of the stored rating: the generated quaternary grey would hide it. */
.pcu-bot-ui__feedback uui-button-utility[data-active] .uui-button-utility__icon {
    color: var(--uui-fg-brand-primary) !important;
}

/* Properties modal (Figma 7292:1312): subtitle, wrapping chips, free text. */
.pcu-bot-ui__feedback-dialog {
    display: grid;
    gap: var(--uui-spacing-4);
    inline-size: 100%;
}

.pcu-bot-ui__feedback-dialog p {
    margin: 0;
}

.pcu-bot-ui__feedback-options {
    --uui-cluster-gap: var(--uui-spacing-2);
    justify-content: flex-start;
}

/* Figma's 320px sits on root and input; the generated rules outrank a plain class. */
.pcu-bot-ui__feedback-dialog uui-textarea,
.pcu-bot-ui__feedback-dialog .uui-textarea__root,
.pcu-bot-ui__feedback-dialog .uui-textarea__input {
    inline-size: 100% !important;
}

/* The generated CSS gives the span around <textarea> no layout, so the textarea shrank to its
   default 192 × 48 inside the 128px field. The field is the box; the textarea fills it. */
.pcu-bot-ui__feedback-dialog .uui-textarea__content {
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    min-inline-size: 0;
}

.pcu-bot-ui__feedback-dialog .uui-textarea__value {
    block-size: 100%;
    resize: none;
}

/* uui-textarea always draws the required star; this field is optional. The generated rule
   carries five attribute selectors, hence !important (as for the width above). */
.pcu-bot-ui__feedback-dialog .uui-textarea__required {
    display: none !important;
}

/* --------------------------------------------------------------- Composer */

.pcu-bot-ui__composer {
    display: grid;
    align-content: center;
    gap: var(--uui-spacing-2);
    padding: var(--uui-spacing-3) var(--uui-spacing-5) var(--uui-spacing-4);
    border-block-start: 1px solid var(--uui-border-secondary);
}

/*
 * pc-super-input brings its own rd-* stylesheet; these rules only seat it in the frame so the
 * field reads as part of the window (border, radius, background follow the theme).
 */
.pcu-bot-ui__super-input .rd-super-input-field {
    border-color: var(--uui-border-primary);
    border-radius: var(--uui-radius-lg);
    background: var(--uui-bg-primary);
}

.pcu-bot-ui__super-input .rd-super-input-field:focus-within {
    border-color: var(--uui-border-brand);
}

.pcu-bot-ui__super-input .rd-super-input-textarea,
.pcu-bot-ui__super-input .rd-super-input-input {
    color: var(--uui-text-primary);
}

.pcu-bot-ui__wand {
    inline-size: 20px;
    block-size: 20px;
    min-inline-size: 20px;
    align-self: center;
    flex-shrink: 0;
    background: url("/src/img/2024/svg/icons/rd-zauberstab-verlauf.svg") center / contain no-repeat;
    opacity: 0.6;
}

.pcu-bot-ui__footer {
    display: none;
}

.pcu-bot-ui__disclaimer {
    flex: 1;
    min-inline-size: 0;
    line-height: 1.4;
}

/* Full disclaimer on a wide chat, the short one when the pane is narrow. */
.pcu-bot-ui__disclaimer-short {
    display: none;
}

@container (max-width: 480px) {
    .pcu-bot-ui__disclaimer-full {
        display: none;
    }

    .pcu-bot-ui__disclaimer-short {
        display: inline;
    }
}

.pcu-bot-ui__footer-links {
    display: flex;
    gap: var(--uui-spacing-3);
    flex-shrink: 0;
}

.pcu-bot-ui__footer-links a {
    color: var(--uui-text-brand-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.pcu-bot-ui__footer-links a:hover {
    text-decoration: underline;
}

/* The composer is the container the disclaimer measures against. */
.pcu-bot-ui__composer {
    container-type: inline-size;
}

/* ----------------------------------------------------------------- Dialog */

.pcu-bot-ui__dialog {
    display: grid;
    gap: var(--uui-spacing-4);
    inline-size: 100%;
}

.pcu-bot-ui__dialog p {
    margin: 0;
}

/* Field widths are Figma's 320px; the dialog body releases them. */
.pcu-bot-ui__dialog uui-input-field,
.pcu-bot-ui__dialog uui-textarea,
.pcu-bot-ui__dialog .uui-input-field__root,
.pcu-bot-ui__dialog .uui-textarea__root {
    inline-size: 100%;
}

/* -------------------------------------------------------------- Workbench */

.pcu-bot-ui__workbench {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-row: 1 / 3;
    grid-template-rows: subgrid;
    min-inline-size: 0;
    overflow: hidden;
}

.pcu-bot-ui__workbench-inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
}

.pcu-bot-ui__workbench[data-busy] > .pcu-bot-ui__workbench-inner,
.pcu-bot-ui__workbench[data-busy] > .pcu-bot-ui__workbench-foot {
    position: relative;
    z-index: 0;
}

.pcu-bot-ui__workbench-busy {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    place-items: center;
    padding: var(--uui-spacing-6);
    background: color-mix(in srgb, var(--uui-bg-primary) 65%, transparent);
    cursor: progress;
}

.pcu-bot-ui__workbench[data-busy] > .pcu-bot-ui__workbench-busy {
    display: grid;
}

.pcu-bot-ui__workbench-busy > uui-alert {
    inline-size: 100%;
    max-inline-size: var(--uui-width-sm);
    min-inline-size: 0;
}

/*
 * The measured width is for the slide only. While the pane is open its content follows the
 * track — the snapshot is written at the moment of collapsing and would otherwise outlive
 * every later change of the tracks (a dragged splitter, a restored chat width): measured
 * 2026-09-30, the content stayed 1008px wide in an 845px track and the footer button sat
 * outside the window.
 */
.pcu-bot-ui__panes--chat .pcu-bot-ui__workbench-inner,
.pcu-bot-ui__panes--chat .pcu-bot-ui__workbench-foot {
    inline-size: var(--pcu-bot-ui-workbench-open-width, 100%);
}

/* The footer row: same grid row as the composer, so the same height and the same top border. */
.pcu-bot-ui__workbench-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--uui-spacing-3);
    box-sizing: border-box;
    inline-size: 100%;
    /* Fill the shared row: measured 80px in a 125px row without it (Chrome does not stretch
       this subgrid item), which left the footer's border floating above the composer's. */
    block-size: 100%;
    align-self: stretch;
    padding: var(--uui-spacing-4) var(--uui-spacing-6);
    border-block-start: 1px solid var(--uui-border-secondary);
}

.pcu-bot-ui__workbench-foot-note {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.pcu-bot-ui__workbench-head {
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-2);
    padding: var(--uui-spacing-3) var(--uui-spacing-5);
    border-block-end: 1px solid var(--uui-border-secondary);
}

.pcu-bot-ui__workbench-head p {
    margin: 0;
}

.pcu-bot-ui__screen-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * The screen switcher is a `button-link` dropdown: the whole title is the trigger, the
 * chevron is its icon. The generated trigger carries Figma's 73px and a link-grey label;
 * here it is the pane's heading, so it takes the title's width and the heading's ink.
 * `!important` against the three-attribute generated rule, the documented exception.
 */
.pcu-bot-ui__screen-switch {
    position: relative;
    min-inline-size: 0;
}

.pcu-bot-ui__screen-switch .uui-dropdown-menu__trigger {
    inline-size: auto !important;
    max-inline-size: 100%;
    justify-content: flex-start !important;
    cursor: pointer;
}

.pcu-bot-ui__screen-switch .uui-dropdown-menu__trigger-label {
    color: var(--uui-text-primary) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcu-bot-ui__screen-switch {
    --uui-dropdown-preferred-width: max-content;
    --uui-dropdown-min-width: 216px;
    --uui-dropdown-max-width: 360px;
}

/*
 * Dashboard canvases stay white (owner decision 2026-10-01). The planning board has its own
 * Figma surface below: its white cards need separation from the inner workbench background
 * (owner decision 2026-10-07). The header and footer are outside this surface.
 */
.pcu-bot-ui__workbench-body {
    /* Keep device stacking layers below the screen switcher's dropdown. */
    isolation: isolate;
    position: relative;
    overflow: auto;
    padding: var(--uui-spacing-6) var(--uui-spacing-4);
    background: var(--uui-bg-primary);
}

/* A solo device is the app: it gets the body edge to edge and owns its scrolling. */
.pcu-bot-ui__workbench-body[data-solo] {
    padding: 0;
    overflow: hidden;
}

/* Product-specific Figma token, frame 7216:7630. Keep it local instead of applying the
   legacy theme to the whole bot window just to obtain its neutral-50 ramp value. */
.pcu-bot-ui__workbench-body[data-planning-board] {
    --uui-planning-board-surface: #f2f6fa;
    background: var(--uui-planning-board-surface);
}

/* Preserve theme contrast when a user has explicitly selected a dark theme. */
:is(.uui-dark, .uui-monokai) .pcu-bot-ui__workbench-body[data-planning-board] {
    --uui-planning-board-surface: var(--uui-bg-secondary);
}

.pcu-bot-ui__workbench-empty {
    display: grid;
    gap: var(--uui-spacing-2);
    place-content: center;
    min-block-size: 100%;
    text-align: center;
}

.pcu-bot-ui__workbench-empty p {
    margin: 0;
    max-inline-size: 36ch;
}

/* ---------------------------------------------------------- Device panels */

/*
 * The container is a CSS grid whose `grid-template-areas` the agent authors through the
 * BotWorkbench device; each panel gets its `grid-area` imperatively. Rows size to content and
 * items park at `start`, so a one-line headline stays one line tall next to a table.
 */
.pcu-bot-ui__panels {
    display: grid;
    gap: var(--uui-spacing-3);
    inline-size: 100%;
    min-block-size: 100%;
    grid-auto-rows: auto;
    align-content: start;
    align-items: start;
}

.pcu-bot-ui__panels[hidden] {
    display: none;
}

/* Empty or malformed template: a plain column. `stretch` is load-bearing — inherited `start`
   is the cross axis here and collapses every panel to its content width. */
.pcu-bot-ui__panels--stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/*
 * A solo device ("fort" — the planning board) owns its screen and fills it. The three
 * dashboard rules above work against a single full-bleed application panel and are lifted
 * together; a DEFINITE height makes the fort the scrollport's owner rather than a long
 * document inside it, so its action bar stays reachable at the bottom of the workbench.
 */
.pcu-bot-ui__panels--solo {
    block-size: 100%;
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
}

/* No frame around the app: the panel card, its padding and its cap are for dashboards. */
.pcu-bot-ui__panels--solo > .pcu-bot-ui__panel {
    max-block-size: none;
    flex: 1;
    overflow: auto;
    min-block-size: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Application devices manage their own scrolling; ordinary solo panels scroll above. */
.pcu-bot-ui__panels--solo > .pcu-bot-ui__panel:has(> pcu-planning-board-device) {
    overflow: hidden;
}

.pcu-bot-ui__panels--solo > .pcu-bot-ui__panel > pcu-planning-board-device {
    display: block;
    block-size: 100%;
}

/*
 * The board's own margins: Figma's 24 / 16 of the body, now inside the app. Only the card list
 * scrolls (the analysis in step 2): the head stays above it and "Planung hinzufügen" stays
 * below it, so neither moves with, nor sits under, the list's scrollbar (owner, 2026-10-19;
 * this reverses the 2026-09-30 rule that the whole board scrolls as one document). The action
 * bar lives in the shell's footer row. The legacy bot window's solo screen does the same
 * (`BotUI.css`). Sticky is no option: the root is not the scrollport any more.
 */
.pcu-bot-ui__panels--solo .pcu-planning-board-device__root {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
    padding: var(--uui-spacing-6) var(--uui-spacing-4);
}

.pcu-bot-ui__panels--solo .pcu-planning-board-device__root > * {
    flex: 0 0 auto;
}

/* The scroll region of each step. Flex items floor at their content size; without `min-block-size: 0`
   the list refuses to shrink and pushes "Planung hinzufügen" out of view. A stray pixel of width
   must never become a second scrollbar. */
.pcu-bot-ui__panels--solo .pcu-planning-board-device__cards,
.pcu-bot-ui__panels--solo .pcu-planning-board-device__root > pcu-planning-analysis {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Content-sized rows need a cap: a 200-row table would blow its row up to tens of thousands
   of pixels. Beyond the cap the panel scrolls internally. */
.pcu-bot-ui__panel {
    min-inline-size: 0;
    min-block-size: 0;
    max-block-size: 80vh;
    overflow: auto;
    padding: var(--uui-spacing-2);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-lg);
    background: var(--uui-bg-primary);
}

/* The DataView's row virtualizer needs a fixed scrollport to measure against. */
.pcu-bot-ui__panel > pc-data-view-device {
    display: block;
    block-size: calc(78vh - var(--uui-spacing-4));
}

/* Narrow panels: never compress a table column below readability — scroll horizontally. */
.pcu-bot-ui__panel .rd-sortable-table-row {
    min-inline-size: 900px;
}

.pcu-bot-ui__panel .rd-sortable-table-cell {
    min-inline-size: 90px;
}

@media (max-width: 720px) {
    .pcu-bot-ui__panels {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }

    .pcu-bot-ui__panel {
        grid-area: unset !important;
    }
}

/* ------------------------------------------------------------------ Motion */

/* The view transitions honour reduced motion in TypeScript (`UuiMotion.ts`); this is the one
   CSS animation of ours. */
@media (prefers-reduced-motion: reduce) {
    .pcu-bot-ui__message {
        animation: none;
    }
}