.mulebot-app > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 2.5rem 1rem; }
.mulebot-app h1 { font-size: 2.5rem; }
.mulebot-app header p { color: var(--text-light); margin: .5rem 0 0; }
.mulebot-app .mulebot-github { display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; margin-left: .5rem; color: inherit; }
.mulebot-app .mulebot-github:hover, .mulebot-app .mulebot-github:focus-visible { color: var(--accent); }
.mulebot-app button { padding: .5rem .9rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--primary); }
.mulebot-app button:hover { border-color: var(--accent); }
.mulebot-settings, .mulebot-access { width: min(100% - 3rem, 1200px); margin: 0 auto 1rem; }
.mulebot-settings, .mulebot-settings label, .custom-model:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.mulebot-settings { gap: 1rem; font-size: .85rem; }
.mulebot-settings .playground-api-key { margin-bottom: 0; }
.mulebot-settings select { max-width: min(350px, 80vw); }
.mulebot-app .hint, #settings-status, #status { color: var(--text-light); font-size: .85rem; }
.mulebot-app details { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .85rem; margin-bottom: 1rem; min-width: 0; }
.mulebot-app summary { cursor: pointer; font-size: .85rem; overflow-wrap: anywhere; }
.mulebot-access { color: var(--text-light); font-size: .85rem; }
#mulebot-subscriptions { display: grid; gap: 1rem; margin-block: 1rem; }
#mulebot-subscriptions > div { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
#mulebot-subscriptions strong { margin-right: .5rem; }
#mulebot-subscriptions a { padding: .2rem .6rem; border-radius: 6px; border: 1px solid var(--border); text-decoration: none; }
#mulebot-subscriptions .subscription-available { color: var(--success); }
.mulebot-app main { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 840px; margin: auto; }
.mulebot-app main.artifact-open { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1600px; }
.mulebot-app .conversation { min-width: 0; padding: 1.5rem; }
#messages { min-height: 35vh; }
.mulebot-app .message { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1rem; padding: 1rem; overflow-wrap: anywhere; }
.mulebot-app .message.user { background: var(--soft); }
.mulebot-app .message > strong { display: block; font-size: .75rem; color: var(--text-light); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .04em; }
.mulebot-app .message p { margin: .5rem 0; }
.mulebot-app .error { color: #a32626; }
.mulebot-app textarea { resize: vertical; width: 100%; padding: 1rem; min-height: 90px; }
.mulebot-app .actions { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; gap: 1rem; }
.mulebot-app #send { background: var(--accent); border-color: var(--accent); color: white; }
#artifact-panel { position: sticky; top: 86px; align-self: start; min-width: 0; max-height: calc(100dvh - 100px); overflow-y: auto; padding: 1.5rem; border-left: 1px solid var(--border); }
.mulebot-app .artifact-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.mulebot-app .artifact-toolbar h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.1rem; }
.mulebot-app .artifact-link { display: flex; flex-direction: column; gap: .25rem; width: 100%; text-align: left; padding: 1rem; margin-bottom: 1rem; }
.mulebot-app .artifact-link strong { font-size: 1rem; }
.mulebot-app .artifact-link span { color: var(--text-light); font-size: .8rem; }
.mulebot-app .artifact-link[aria-expanded="true"] { background: var(--soft); border-color: var(--accent); }
.mulebot-app .artifact { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1rem; }
.mulebot-app .artifact svg { width: 100%; height: auto; display: block; }
.mulebot-app .legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8rem; margin: .6rem 0; }
.mulebot-app .legend span { display: flex; align-items: center; gap: .3rem; }
.mulebot-app .legend svg { width: 10px; height: 10px; }
.mulebot-app .tool { margin: 0 0 .75rem; background: transparent; }
.mulebot-app .tools > .tool-list, .mulebot-app .reasoning { margin-top: .75rem; }
.mulebot-app .tools > summary { display: flex; align-items: flex-start; gap: .5rem; list-style: none; color: var(--text-light); }
.mulebot-app .tools > summary::-webkit-details-marker { display: none; }
.mulebot-app .tools > summary::before { content: '▸'; }
.mulebot-app .tools[open] > summary::before { content: '▾'; }
.mulebot-app .tools > summary > span:first-child { flex: 1; min-width: 0; }
.mulebot-app .tool-history-actions { display: inline-flex; flex: none; align-items: center; gap: .4rem; }
.mulebot-app .tool-history-button { padding: .2rem; border: 0; color: var(--text-light); background: transparent; }
.mulebot-app .tool-history-button:hover { color: var(--accent); background: var(--soft); }
.mulebot-app .tool-history-button svg { display: block; width: 16px; height: 16px; }
.mulebot-app .tool-history-status { font-size: .8rem; }
.mulebot-app .tools .tool:last-child { margin-bottom: 0; }
.mulebot-app .reasoning pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.mulebot-app pre { overflow: auto; padding: .75rem; background: var(--soft); border-radius: 5px; font-size: .8rem; }
.mulebot-app code { font-family: ui-monospace, monospace; font-size: .9em; }
.mulebot-app .table-wrap { overflow-x: auto; }
.mulebot-app table { border-collapse: collapse; font-size: .8rem; width: 100%; }
.mulebot-app th, .mulebot-app td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mulebot-app .artifact-actions { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; }
.mulebot-app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 850px) {
    .mulebot-app main.artifact-open { grid-template-columns: minmax(0, 1fr); }
    #artifact-panel { position: fixed; inset: 70px 0 0; height: calc(100dvh - 70px); z-index: 999; max-height: none; background: var(--bg); border: 0; padding: 1rem; }
    .mulebot-app > header { padding-top: 1.5rem; }
    .mulebot-app .conversation { padding: 1rem; }
}