.reasoning-output {
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.82em;
    line-height: 1.5;
    opacity: 0.6;
    padding: 8px 12px;
    border-left: 3px solid rgba(128, 128, 128, 0.3);
    margin-top: 4px;
    white-space: pre-wrap;
    font-family: inherit;
}

.reasoning-output:hover {
    opacity: 0.85;
}

.reasoning-header {
    font-size: 0.82em;
    opacity: 0.5;
    cursor: pointer;
    user-select: none;
}

/* Widen the element sidebar so the BatchHistory table fits without horizontal scroll.
   Chainlit renders the right panel as a ResizablePanel (data-panel) with sm:hidden class. */
div[data-panel][class*="sm:hidden"] {
    flex-grow: 45 !important;
    min-width: min(560px, 45vw) !important;
}

/* Reset Agent action button — emphasised red so users notice it's the
   "blow away memory" control among the other reply actions.  The
   button's HTML id is set explicitly via cl.Action(id="reset-agent-action")
   in ui/app.py because Chainlit hard-codes variant/className on action
   buttons and id is the only stable Python-side styling hook. */
button#reset-agent-action {
    background-color: hsl(0, 72%, 51%);
    color: #ffffff !important;
    border: 1px solid hsl(0, 72%, 45%);
}

button#reset-agent-action:hover {
    background-color: hsl(0, 72%, 43%);
    color: #ffffff !important;
    border-color: hsl(0, 72%, 38%);
}

button#reset-agent-action:disabled {
    background-color: hsl(0, 30%, 60%);
    color: #ffffff !important;
    opacity: 0.65;
}