@import url("/admin.css") layer(legacy);
@import url("/organization-admin.css") layer(legacy);
@import url("/admin-integrated.css") layer(legacy);
@import url("/admin-credentials.css") layer(legacy);
@import url("/admin-tools.css") layer(legacy);
@import url("/admin-model-groups.css") layer(legacy);
@import url("/brand-assets.css") layer(legacy);
@import url("/admin-pages.css") layer(legacy);
@import url("/experience.css") layer(legacy);
@import url("/bc-shared.css");

/* Model catalog uses intrinsic card height rather than the 32px control height. */
#modelCatalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-items:stretch}
#modelCatalog .catalog-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;min-width:0;width:100%;height:auto;min-height:148px;padding:16px;text-align:left;white-space:normal;border:1px solid var(--bc-border);border-radius:8px;background:var(--bc-surface);color:var(--bc-text);overflow:hidden;cursor:pointer}
#modelCatalog .catalog-card:hover{background:var(--bc-hover);border-color:var(--bc-muted)}
#modelCatalog .catalog-card:focus-visible{outline:2px solid var(--bc-ring);outline-offset:2px}
#modelCatalog .catalog-card:disabled{cursor:default;opacity:.65}
#modelCatalog .catalog-card.configured{background:color-mix(in srgb,var(--bc-success) 20%,var(--bc-surface));border-color:color-mix(in srgb,var(--bc-success) 65%,var(--bc-border));opacity:1}
#modelCatalog .catalog-card.configured .catalog-added{color:var(--bc-success);background:var(--bc-surface);font-weight:600}
#modelCatalog .catalog-card :is(b,em,small){display:block;min-width:0;margin:0;overflow-wrap:anywhere;font-style:normal;line-height:20px}
#modelCatalog .catalog-card b{font-size:14px;font-weight:600}
#modelCatalog .catalog-card em{font-size:12px;color:var(--bc-muted)}
#modelCatalog .catalog-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
#modelCatalog .catalog-tags span{font-size:11px;line-height:20px;padding:0 6px;background:var(--bc-hover);border-radius:4px;white-space:normal}
.model-provider-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}

.model-reasoning-visibility{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:12px;border:1px solid var(--bc-border);border-radius:8px;min-width:0}
.model-reasoning-visibility legend{padding:0 4px;font-weight:500}
.model-reasoning-visibility>small{grid-column:1/-1;color:var(--bc-muted)}
.model-reasoning-visibility .check-row{margin:0}
#taskConversationReplay{display:block;width:100%;height:72vh;min-height:420px;border:0;border-radius:8px;background:#fff}
/* Keep the existing mobile drawer out of the document grid's first row. */
@media(max-width:900px){.admin-shell{display:block;width:100%}.admin-shell>main{width:100%;min-width:0}#adminSidebar{position:fixed;inset:0 auto 0 0;z-index:40;width:min(300px,88vw);max-width:88vw;height:100dvh;transform:translateX(-105%)}#adminSidebar.open{transform:translateX(0)}}
#agentPluginSettingsFields .plugin-setting-toggle{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px}#agentPluginSettingsFields .plugin-setting-toggle input{width:16px;height:16px;accent-color:var(--bc-accent);margin:0}#agentPluginSettingsFields .plugin-setting-toggle small{grid-column:1/-1}#agentPluginSettingsFields .plugin-setting-wide{grid-column:1/-1}#agentPluginSettingsFields textarea{width:100%;padding:10px;border:1px solid var(--bc-border);border-radius:8px;font:inherit;resize:vertical}#agentPluginSettingsFields small{color:var(--bc-muted);font-size:12px;line-height:1.6}