html, body, #app {
    margin: 0;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--mud-palette-background, #f3f0ea);
    color: var(--mud-palette-text-primary, #1e1a14);
}

html.mud-theme-dark,
html.mud-theme-dark body,
html.mud-theme-dark #app {
    background: var(--mud-palette-background, #12181b);
    color: var(--mud-palette-text-primary, #e8e4dc);
    color-scheme: dark;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
}

#blazor-error-ui.show {
    display: block;
}

.app-boot-error {
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(180, 60, 50, 0.12), transparent 60%),
        linear-gradient(165deg, #f7f4ef 0%, #ebe6dc 100%);
}

.app-boot-card-error {
    border-color: rgba(180, 60, 50, 0.22);
}

.app-boot-error-detail {
    margin-top: 0;
    margin-bottom: 1.25rem;
    color: #5c6670;
}

.app-boot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

.app-boot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
}

.app-boot-btn-primary {
    background: #274c77;
    color: #fff;
    border-color: #274c77;
}

.app-boot-btn-primary:hover {
    background: #1e3d61;
    color: #fff;
}

.app-boot-btn-secondary {
    background: transparent;
    color: #274c77;
    border-color: rgba(39, 76, 119, 0.35);
}

.app-boot-btn-secondary:hover {
    background: rgba(39, 76, 119, 0.06);
}

.loading-progress {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress-track {
    stroke: rgba(39, 76, 119, 0.18);
}

.loading-progress-value {
    stroke: #274c77;
    stroke-dasharray: calc(251.2 * var(--blazor-load-percentage, 0%) / 100%), 251.2;
    transition: stroke-dasharray 0.12s ease-out;
}

.loading-progress-text {
    text-align: center;
    font-weight: 650;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #274c77;
    min-height: 1.4em;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Preparing?");
}

.app-boot {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(39, 76, 119, 0.12), transparent 60%),
        linear-gradient(165deg, #f7f4ef 0%, #ebe6dc 100%);
}

.app-boot-card {
    width: min(100%, 360px);
    text-align: center;
    padding: 2rem 1.75rem 1.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(39, 76, 119, 0.12);
    box-shadow: 0 12px 40px rgba(30, 40, 60, 0.08);
    backdrop-filter: blur(8px);
}

.app-boot-brand {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #17324f;
    margin-bottom: 0.35rem;
}

.app-boot-message {
    margin: 0 0 1.35rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #4a5a6a;
}

.app-boot-ring {
    margin: 0 auto 0.85rem;
}

.app-boot-hint {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #7a8694;
}

:root {
    --admin-appbar-height: var(--mud-appbar-height, 48px);
    --admin-page-pad-y: 16px;
    /* Per-table height set by js/admin-table-fit.js (min 400px). */
    --admin-fit-height: 400px;
    /* Legacy aliases — all resolve to the measured fit height. */
    --admin-table-height: var(--admin-fit-height);
    --admin-table-height-filtered: var(--admin-fit-height);
    --admin-table-height-split: var(--admin-fit-height);
    --admin-table-height-tagging: var(--admin-fit-height);
}

.mud-layout {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

.mud-main-content.admin-main {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        var(--mud-palette-background, #f3f0ea) 0%,
        color-mix(in srgb, var(--mud-palette-background, #f3f0ea) 88%, var(--mud-palette-drawer-background, #ebe6dc)) 100%
    );
}

.admin-main > .mud-container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-top: var(--admin-page-pad-y, 16px) !important;
    padding-bottom: var(--admin-page-pad-y, 16px) !important;
    /* Keep width stable so fit height doesn't jump when a gutter appears. */
    scrollbar-gutter: stable;
}

/* Activity: one scrollbar inside the tab pane — not also on the page container. */
.admin-main > .mud-container:has(> .activity-page) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.activity-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.activity-page > .mud-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.activity-page > .mud-tabs > .mud-tabs-panels,
.activity-page .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.activity-page > .mud-tabs > .mud-tabs-panels > .mud-tab-panel,
.activity-page .mud-tabs-panels > .mud-tab-panel {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.activity-page .mud-tabs-panels > .mud-tab-panel.pt-4 {
    padding-top: 16px !important;
}

.activity-page .activity-tab-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 8px;
    padding-bottom: 16px;
}

/* Chat / Search: filters fixed, only the data grid scrolls (no outer window scrollbar). */
.activity-page .activity-tab-fit {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
}

.activity-page .activity-tab-fit > .admin-filters,
.activity-page .activity-tab-fit > .mud-paper:not(.activity-tab-fit-grid) {
    flex: 0 0 auto;
}

.activity-page .activity-tab-fit > .activity-tab-fit-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* Maintenance sidebar flyout (hover) */
.admin-nav-flyout {
    display: block;
    width: 100%;
}

.admin-nav-flyout .mud-menu-activator,
.admin-nav-flyout > .mud-button-root {
    display: block;
    width: 100%;
    padding: 0;
    min-width: 0;
    text-transform: none;
    justify-content: stretch;
}

.admin-nav-flyout-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 8px 16px;
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-drawer-text, var(--mud-palette-text-primary));
    cursor: default;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.admin-nav-flyout-icon {
    color: var(--mud-palette-drawer-icon, inherit);
    flex: 0 0 auto;
}

.admin-nav-flyout-label {
    flex: 1 1 auto;
    text-align: start;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

.admin-nav-flyout-chevron {
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.admin-nav-flyout-trigger:hover,
.admin-nav-flyout.mud-menu-open .admin-nav-flyout-trigger {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
}

.admin-nav-flyout-trigger:hover .admin-nav-flyout-icon,
.admin-nav-flyout.mud-menu-open .admin-nav-flyout-icon {
    color: var(--mud-palette-primary);
}

.admin-nav-flyout-trigger:hover .admin-nav-flyout-chevron,
.admin-nav-flyout.mud-menu-open .admin-nav-flyout-chevron {
    opacity: 1;
    transform: translateX(2px);
    color: var(--mud-palette-primary);
}

.admin-nav-flyout-popover.mud-popover {
    border-radius: 10px !important;
    /* Defeat Mud's viewport max-height clamp so the flyout can shift up intact. */
    max-height: none !important;
    overflow: visible !important;
    box-shadow:
        0 4px 6px -1px rgba(28, 35, 45, 0.08),
        0 14px 28px -6px rgba(28, 35, 45, 0.16) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 80%, transparent);
    animation: admin-nav-flyout-in 0.18s ease;
}

.admin-nav-flyout-popover.mud-popover .mud-list,
.admin-nav-flyout-list {
    max-height: none !important;
    overflow: visible !important;
    padding: 6px !important;
    min-width: 230px;
}

.admin-nav-flyout-list .mud-menu-item {
    border-radius: 8px;
    min-height: 40px;
    transition: background-color 0.14s ease;
}

.admin-nav-flyout-list .mud-menu-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

@keyframes admin-nav-flyout-in {
    from {
        opacity: 0;
        transform: translateX(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.admin-table-full {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

/* Measured by admin-table-fit.js; MudTable / MudDataGrid Height should use var(--admin-fit-height). */
.mud-table.admin-table-full,
.mud-data-grid.admin-table-full {
    --admin-fit-height: 400px;
    width: 100%;
}

.mud-table.admin-table-full > .mud-table-container {
    min-height: 400px;
    /* HorizontalScrollbar sets inline width:max-content on the container — override it. */
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
}

/* DataGrid: allow ColumnResizeMode=Container / HorizontalScrollbar to grow past the viewport
   (Mud sets width:max-content inline). Keep min-width so empty grids still fill the page. */
.mud-data-grid.admin-table-full > .mud-table-container {
    min-height: 400px;
    min-width: 100%;
    max-width: none;
}

.mud-data-grid.admin-table-full table.mud-table-root {
    min-width: 100%;
    width: max-content;
}

/* Vertical column grid lines (header + body). */
.mud-data-grid .mud-table-root .mud-table-head .mud-table-cell:not(:last-child),
.mud-data-grid .mud-table-root .mud-table-body .mud-table-cell:not(:last-child),
.mud-data-grid .mud-table-root .mud-table-foot .mud-table-cell:not(:last-child) {
    border-right: 1px solid var(--mud-palette-table-lines);
}

.admin-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    min-height: 40px;
}

.admin-table-toolbar .mud-typography {
    margin: 0;
}

.flow-select-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.llm-cache-hit {
    min-width: 96px;
    max-width: 140px;
}

.llm-cache-hit-track {
    height: 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    overflow: hidden;
}

.llm-cache-hit-fill {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
}

.llm-cache-hit-pct {
    margin-top: 3px;
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* LLM Calls: explicit cache create vs generateContent cache hit */
.mud-table-row.llm-row-cache-create,
.mud-table-row.llm-row-cache-create > td {
    background-color: #ffecb3 !important; /* amber, same cue as dark theme */
}

.mud-table-row.llm-row-cache-hit,
.mud-table-row.llm-row-cache-hit > td {
    background-color: #eef6ff !important; /* very light blue */
}

.mud-table-row.llm-row-cache-create:hover > td,
.mud-table-row.llm-row-cache-hit:hover > td {
    filter: brightness(0.97);
}

.gemini-rate-key-active {
    border: 2px solid var(--mud-palette-success) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
}

.activity-timeline-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.activity-timeline-drawer-body {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

.activity-row-clicked td {
    background-color: #e8f5e9 !important;
}

.activity-row-clicked:hover td {
    background-color: #dcedc8 !important;
}

.conversation-row-abusive > td {
    border-top: 1.5px solid rgba(229, 115, 115, 0.9) !important;
    border-bottom: 1.5px solid rgba(229, 115, 115, 0.9) !important;
    background-color: rgba(255, 235, 238, 0.35) !important;
}

.conversation-row-abusive > td:first-child {
    border-left: 1.5px solid rgba(229, 115, 115, 0.9) !important;
}

.conversation-row-abusive > td:last-child {
    border-right: 1.5px solid rgba(229, 115, 115, 0.9) !important;
}

.conversation-row-abusive:hover > td {
    background-color: rgba(255, 235, 238, 0.55) !important;
}

/* Thin separator under all modal headers */
.mud-dialog .mud-dialog-title {
    border-bottom: 2px solid var(--mud-palette-lines-default, #E5DDD0);
}

/* Conversation flow modal — near-fullscreen; title/actions fixed, body scrolls */
.mud-dialog.conversation-flow-dialog,
.conversation-flow-dialog.mud-dialog,
.conversation-flow-dialog {
    width: min(92vw, 1100px) !important;
    max-width: 92vw !important;
    height: 90vh;
    max-height: 90vh;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.conversation-flow-dialog .mud-dialog-title,
.mud-dialog.conversation-flow-dialog .mud-dialog-title {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    background: var(--mud-palette-surface);
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.conversation-flow-dialog .mud-dialog-content,
.mud-dialog.conversation-flow-dialog .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    padding-bottom: 8px;
}

.conversation-flow-dialog .mud-dialog-actions,
.mud-dialog.conversation-flow-dialog .mud-dialog-actions {
    flex: 0 0 auto;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.conversation-flow-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: auto;
    padding-right: 4px;
}

.conversation-flow-turns {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.conversation-flow-turn {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    overflow: hidden;
}

/* Collapsed turn with topic set / subject change — same green as step band */
.conversation-flow-turn.conversation-flow-turn--subject-change:not(.conversation-flow-turn--expanded) {
    background: color-mix(in srgb, #4caf50 22%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.45);
}

.conversation-flow-turn.conversation-flow-turn--subject-change:not(.conversation-flow-turn--expanded) .conversation-flow-turn-header {
    background: color-mix(in srgb, #4caf50 22%, var(--mud-palette-surface));
}

.conversation-flow-turn.conversation-flow-turn--subject-narrowed:not(.conversation-flow-turn--expanded) {
    background: color-mix(in srgb, #2196f3 22%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px rgba(33, 150, 243, 0.45);
}

.conversation-flow-turn.conversation-flow-turn--subject-narrowed:not(.conversation-flow-turn--expanded) .conversation-flow-turn-header {
    background: color-mix(in srgb, #2196f3 22%, var(--mud-palette-surface));
}

/* Match MudExpansionPanel dense header layout */
.conversation-flow-turn-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    min-height: 0;
}

.conversation-flow-turn-header:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.conversation-flow-turn-header-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding-right: 8px;
}

.conversation-flow-turn-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.conversation-flow-expand-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-action-default);
    transition: transform .3s cubic-bezier(0.25, 0.8, 0.5, 1);
    line-height: 0;
}

.conversation-flow-expand-icon svg,
.conversation-flow-expand-icon .mud-icon-root {
    fill: currentColor;
    display: block;
    margin: 0 !important;
    width: 1.5rem;
    height: 1.5rem;
}

.conversation-flow-expand-icon--open {
    transform: rotate(-180deg);
}

.conversation-flow-turn-body {
    padding: 0 0 12px;
}

/* MudStack Spacing=1 ≈ 4px; MudChip already has margin:4px — don't double-gap */
.conversation-flow-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.conversation-flow-chip-row--align {
    align-items: center;
}

.conversation-flow-step-title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.2em;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.43;
    color: var(--mud-palette-text-primary);
    margin: 0 4px;
}

.conversation-flow-plain-text {
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--mud-palette-text-primary);
}

/* Nested sections: look like Mud dense ExpansionPanel (no card border) */
.conversation-flow-section-toggle {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    min-height: 0;
}

.conversation-flow-section-toggle:hover {
    cursor: pointer;
}

.conversation-flow-section-toggle:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.conversation-flow-section-toggle-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    padding-right: 8px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.43;
    color: var(--mud-palette-text-primary);
}

.conversation-flow-section-body {
    margin-top: 0;
    padding: 0 0 8px;
}

.conversation-flow-profile-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
    font-size: 0.875rem;
    background: var(--mud-palette-surface);
}

.conversation-flow-profile-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 10px;
    vertical-align: middle;
}

.conversation-flow-profile-table tr:hover td {
    background: var(--mud-palette-table-hover);
}

.conversation-flow-pipeline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* Full turn-width green band; node stays centered at 820px */
.conversation-flow-step-row {
    width: 100%;
    padding: 10px 0;
}

.conversation-flow-step-row--subject-change {
    background: color-mix(in srgb, #4caf50 22%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.45);
}

.conversation-flow-step-row--subject-narrowed {
    background: color-mix(in srgb, #2196f3 22%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px rgba(33, 150, 243, 0.45);
}

.conversation-flow-subject-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    margin: 2px 4px 6px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.conversation-flow-subject-note-arrow {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.conversation-flow-step-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px;
}

.conversation-flow-node {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--mud-palette-surface);
}

.conversation-flow-node-user {
    border-left: 4px solid #546e7a;
}

.conversation-flow-node-gate {
    border-left: 4px solid #f9a825;
}

.conversation-flow-node-router {
    border-left: 4px solid #1565c0;
}

.conversation-flow-node-agent {
    border-left: 4px solid #6a1b9a;
}

.conversation-flow-node-search {
    border-left: 4px solid #00897b;
}

.conversation-flow-node-catalog {
    border-left: 4px solid #5c6bc0;
}

.conversation-flow-node-pool {
    border-left: 4px solid #00897b;
}

.conversation-flow-node-filter {
    border-left: 4px solid #ef6c00;
}

.conversation-flow-soft-ops-list {
    margin: 0;
    padding: 10px 12px 10px 1.6rem;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.45;
}

.conversation-flow-soft-ops-list li {
    margin: 0.35rem 0;
}

.conversation-flow-soft-ops-list li:first-child {
    margin-top: 0;
}

.conversation-flow-soft-ops-list li:last-child {
    margin-bottom: 0;
}

.conversation-flow-narrow-chips-list {
    margin: 0;
    padding: 10px 12px 10px 1.6rem;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.45;
    list-style: disc;
}

.conversation-flow-narrow-chips-list li {
    margin: 0.4rem 0;
}

.conversation-flow-narrow-chips-list li:first-child {
    margin-top: 0;
}

.conversation-flow-narrow-chips-list li:last-child {
    margin-bottom: 0;
}

.conversation-flow-narrow-chip-label {
    font-weight: 600;
    margin-right: 0.35rem;
}

.conversation-flow-narrow-chip-label::after {
    content: ":";
}

.conversation-flow-narrow-chip-ids {
    font-family: Consolas, Menlo, monospace;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.conversation-flow-node-click {
    border-left: 4px solid #0d5eaf;
    background: color-mix(in srgb, #4caf50 16%, var(--mud-palette-surface));
}

.conversation-flow-node-outcome {
    border-left: 4px solid #2e7d32;
}

.conversation-flow-node-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.conversation-flow-explanation {
    color: var(--mud-palette-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.conversation-flow-explanation-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-bottom: 2px;
    line-height: 1.55;
}

.conversation-flow-quoted {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.conversation-flow-explanation .conversation-flow-quoted,
.conversation-flow-step-title .conversation-flow-quoted,
.conversation-flow-soft-ops-list .conversation-flow-quoted,
.conversation-flow-connector-label .conversation-flow-quoted {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* FlowChip is a <button|div class="mud-chip"> — keep button font matching MudChip. */
button.mud-chip {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.conversation-flow-legend-chip {
    cursor: pointer;
}

.conversation-flow-agent-chip {
    font-weight: 600;
}

.conversation-flow-message-block {
    position: relative;
    margin-top: 16px;
    padding: 14px 12px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: rgba(84, 110, 122, 0.07);
}

.conversation-flow-message-label {
    position: absolute;
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    padding: 0 7px;
    /* Match parent node surface so the label sits on / cuts the top border */
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.7rem;
    line-height: 1;
}

/* Inline section captions (not floated on a message-block border). */
.conversation-flow-section-label {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.7rem;
    line-height: 1.2;
}

.conversation-flow-message {
    white-space: pre-wrap;
    word-break: break-word;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
}

.conversation-flow-json {
    margin: 0;
    padding: 10px 12px;
    max-height: 320px;
    overflow: auto;
    font-size: 0.78rem;
    line-height: 1.4;
    font-family: Consolas, Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 6px;
}

.conversation-flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding: 4px 16px 6px;
    color: var(--mud-palette-text-secondary);
    gap: 2px;
}

.conversation-flow-connector-line {
    display: block;
    width: 2px;
    height: 10px;
    background: var(--mud-palette-lines-default);
}

.conversation-flow-connector-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-width: 460px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 550;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    padding: 6px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, #f9a825 16%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, #e6c86a 55%, var(--mud-palette-lines-default));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.conversation-flow-connector-label .conversation-flow-explanation-line {
    justify-content: center;
}

.conversation-flow-connector-arrow {
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.7;
}

.conversation-flow-details {
    background: transparent;
}

.conversation-flow-profile {
    background: transparent;
}

.conversation-flow-match-hits {
    background: transparent;
}

.conversation-flow-profile-title {
    /* profile header uses section-toggle layout; keep heading styles */
    width: 100%;
}

.conversation-flow-profile-heading {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

.conversation-flow-profile-chip {
    max-width: 11.5rem;
}

.mud-chip.conversation-flow-profile-chip-icon-only {
    max-width: none;
    min-width: 20px;
    width: 20px;
    height: 20px;
    padding: 0 !important;
    justify-content: center;
}

.mud-chip.conversation-flow-profile-chip-icon-only .mud-chip-content {
    display: none;
}

.mud-chip.conversation-flow-profile-chip-icon-only .mud-chip-icon {
    margin: 0 !important;
    font-size: 0.875rem !important;
}

.activity-chat-profile-chips {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
}

.activity-chat-profile-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.activity-chat-profile-slot-empty {
    opacity: 0.18;
}

.activity-chat-profile-chips .mud-tooltip-root,
.activity-chat-profile-chips .mud-chip {
    flex-shrink: 0;
}

/* Single-line profile chips: reserve column width so they don't paint over Actions. */
.mud-data-grid.admin-table-full td.activity-chat-profile-cell,
.mud-data-grid.admin-table-full th.activity-chat-profile-cell {
    width: 1%;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    vertical-align: middle;
}

.conversation-flow-profile-chip-updated.mud-chip,
.conversation-flow-profile-chip-updated {
    box-shadow: 0 0 0 3px #eab308;
}

.conversation-flow-profile-chip-wrap {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    overflow: visible;
}

.conversation-flow-profile-chip-crown {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 16px;
    height: 16px;
    line-height: 0;
    transform: translate(-20%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
}

.conversation-flow-profile-chip-crown svg {
    display: block;
}

/* Same corner placement as the crown — red disc badge, chip stays readable. */
.conversation-flow-profile-chip-wrap-removed {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    overflow: visible;
}

.conversation-flow-profile-chip-removed-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 22px;
    height: 22px;
    line-height: 0;
    transform: translate(35%, -45%);
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.conversation-flow-profile-chip-removed-badge svg {
    display: block;
    width: 22px;
    height: 22px;
}

.mud-chip.conversation-flow-profile-chip-removed {
    opacity: 0.72;
    filter: grayscale(0.35);
    box-shadow: 0 0 0 2px #dc2626;
}

.mud-chip.conversation-flow-profile-chip-removed .mud-chip-content {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.conversation-flow-profile-value-removed {
    text-decoration: line-through;
    opacity: 0.7;
}

.mud-tooltip.conversation-flow-profile-tooltip {
    max-width: min(90vw, 42rem);
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

.json-preview-panel {
    max-height: 70vh;
    overflow: auto;
    background: #0f172a !important;
}

.json-preview-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85rem;
    font-family: Consolas, Menlo, monospace;
    line-height: 1.45;
    color: #e2e8f0;
}

.json-static-prompt {
    margin-bottom: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
}

.json-static-prompt-summary {
    cursor: pointer;
    user-select: none;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    list-style: none;
}

.json-static-prompt-summary::-webkit-details-marker {
    display: none;
}

.json-static-prompt-summary::before {
    content: "▸ ";
    color: #94a3b8;
}

.json-static-prompt[open] > .json-static-prompt-summary::before {
    content: "▾ ";
}

.json-static-prompt-hint {
    font-weight: 400;
    color: #94a3b8;
    margin-left: 6px;
}

.json-static-prompt-body {
    max-height: 40vh;
    overflow: auto;
    padding: 0 12px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    margin-top: 0;
}

.json-variable-prompt {
    margin-bottom: 12px;
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
}

.json-variable-prompt-label {
    padding: 10px 12px 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6ee7b7;
}

.json-variable-prompt-body {
    max-height: 45vh;
    overflow: auto;
    padding: 0 12px 12px;
}

.intent-legend-row-highlight td {
    background-color: rgba(25, 118, 210, 0.12) !important;
}

.activity-card-clicked {
    background-color: #e8f5e9 !important;
}

.course-section {
    padding: 14px 16px 12px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.course-section-title {
    margin-bottom: 10px !important;
    font-weight: 650 !important;
}

.course-section-basics {
    background: rgba(39, 76, 119, 0.07);
    border-color: rgba(39, 76, 119, 0.16);
}

.course-section-fees {
    background: rgba(46, 125, 90, 0.08);
    border-color: rgba(46, 125, 90, 0.18);
}

.course-section-discounts {
    background: rgba(180, 120, 40, 0.09);
    border-color: rgba(180, 120, 40, 0.2);
}

.course-section-lessons {
    background: rgba(90, 70, 150, 0.08);
    border-color: rgba(90, 70, 150, 0.18);
}

.course-section-collaborators {
    background: rgba(30, 130, 140, 0.08);
    border-color: rgba(30, 130, 140, 0.18);
}

.course-section-related {
    background: rgba(150, 70, 90, 0.08);
    border-color: rgba(150, 70, 90, 0.18);
}

/* Keep form controls on a white surface inside tinted sections */
.course-section .mud-input-control,
.course-section .mud-picker,
.course-section .mud-table,
.course-section .mud-expand-panel,
.course-section .mud-paper {
    background-color: #fff;
    border-radius: 6px;
}

.course-section .mud-input-control .mud-input-outlined,
.course-section .mud-input-control .mud-input-filled {
    background-color: #fff;
}

.course-section .mud-table .mud-table-container,
.course-section .mud-table .mud-table-root {
    background-color: #fff;
}

.course-lesson-card {
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(90, 70, 150, 0.18);
}

.course-lesson-title .mud-input-control {
    background-color: #fff;
}

.course-lesson-title .mud-input-slot,
.course-lesson-title input {
    font-size: 1.05rem !important;
    font-weight: 650 !important;
}

.course-units {
    padding-left: 1.25rem;
    margin-top: 4px;
}

.course-unit-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 6px;
}

.api-call-hint {
    position: relative;
    z-index: 2;
    margin-top: 4px;
    margin-bottom: 8px;
}

.api-call-hint-toggle {
    font-size: 0.75rem;
    color: var(--mud-palette-primary);
    text-decoration: underline;
    cursor: pointer;
}

.api-call-hint-url {
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    word-break: break-all;
    cursor: pointer;
}

.api-call-hint-url:hover {
    text-decoration: underline;
    color: var(--mud-palette-primary);
}

.activity-charts-pane {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    padding-bottom: 24px;
}

.activity-charts-section-title {
    letter-spacing: 0.01em;
    margin-bottom: 2px;
}

.activity-funnel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 55%),
        color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-background));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.activity-funnel-step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.activity-funnel-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    flex-shrink: 0;
}

.activity-funnel-label {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}

.activity-funnel-desc {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.25;
}

.activity-funnel-arrow {
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-text-secondary));
    font-weight: 600;
    opacity: 0.85;
}

.activity-funnel--guide {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.activity-funnel--animated .activity-funnel-step,
.activity-funnel--replay .activity-funnel-step {
    animation: activity-funnel-in 0.7s ease both;
    animation-delay: calc(var(--funnel-i, 0) * 140ms);
}

.activity-funnel--animated .activity-funnel-arrow,
.activity-funnel--replay .activity-funnel-arrow {
    animation: activity-funnel-arrow 0.75s ease both;
    animation-delay: 0.3s;
}

.activity-funnel--animated .activity-funnel-num,
.activity-funnel--replay .activity-funnel-num {
    animation: activity-pulse-soft 2s ease-in-out infinite;
    animation-delay: calc(0.5s + var(--funnel-i, 0) * 0.35s);
}

.activity-funnel--replay {
    animation: activity-funnel-glow 1.2s ease;
}

@keyframes activity-funnel-glow {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 0%, transparent); }
    40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 0%, transparent); }
}

@keyframes activity-funnel-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes activity-funnel-arrow {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 0.85; transform: translateX(0); }
}

@keyframes activity-pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 0%, transparent); }
    50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent); }
}

.activity-charts-guide-tips {
    margin: 0;
    padding-left: 1.15rem;
}

.activity-charts-guide-tips li {
    margin-bottom: 0.4rem;
}

.activity-charts-guide-table td:first-child {
    white-space: nowrap;
    vertical-align: top;
    padding-right: 12px;
}

.activity-guide-tabs {
    display: grid;
    gap: 10px;
}

.activity-guide-tab-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 75%, transparent);
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--mud-palette-primary) 5%, transparent), transparent 42%),
        var(--mud-palette-surface);
    animation: activity-funnel-in 0.4s ease both;
    animation-delay: calc(var(--tab-i, 0) * 55ms);
}

.activity-guide-tab-card p {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.activity-guide-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    color: #1565c0;
    background: color-mix(in srgb, #1565c0 14%, transparent);
}

.activity-guide-tab-icon--outcomes { color: #ef6c00; background: color-mix(in srgb, #ef6c00 14%, transparent); }
.activity-guide-tab-icon--cost { color: #2e7d32; background: color-mix(in srgb, #2e7d32 14%, transparent); }
.activity-guide-tab-icon--audience { color: #6a1b9a; background: color-mix(in srgb, #6a1b9a 14%, transparent); }
.activity-guide-tab-icon--chat { color: #1565c0; background: color-mix(in srgb, #1565c0 14%, transparent); }
.activity-guide-tab-icon--search { color: #00897b; background: color-mix(in srgb, #00897b 14%, transparent); }
.activity-guide-tab-icon--marketing { color: #455a64; background: color-mix(in srgb, #455a64 14%, transparent); }

.activity-kpi-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 80%, transparent);
    box-shadow: none !important;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--mud-palette-primary) 5%, transparent), transparent 48%),
        var(--mud-palette-surface);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.activity-kpi-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    opacity: 0.85;
}

.activity-kpi-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
}

.activity-kpi-card--chat {
    background:
        linear-gradient(160deg, color-mix(in srgb, #1565c0 10%, transparent), transparent 50%),
        var(--mud-palette-surface);
}

.activity-kpi-card--chat::after { background: #1565c0; }

.activity-kpi-card--search {
    background:
        linear-gradient(160deg, color-mix(in srgb, #00897b 10%, transparent), transparent 50%),
        var(--mud-palette-surface);
}

.activity-kpi-card--search::after { background: #00897b; }

.activity-kpi-card--propose {
    background:
        linear-gradient(160deg, color-mix(in srgb, #455a64 10%, transparent), transparent 50%),
        var(--mud-palette-surface);
}

.activity-kpi-card--propose::after { background: #455a64; }

.activity-kpi-card--click {
    background:
        linear-gradient(160deg, color-mix(in srgb, #ef6c00 10%, transparent), transparent 50%),
        var(--mud-palette-surface);
}

.activity-kpi-card--click::after { background: #ef6c00; }

.activity-kpi-card--compact {
    min-height: 88px;
}

.activity-kpi-card--enter {
    /* JS drives entrance; keep a CSS fallback if JS is slow */
    animation: activity-kpi-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--kpi-i, 0) * 100ms);
}

.activity-chart-card--enter {
    animation: activity-chart-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.15s + var(--chart-i, 0) * 120ms);
}

.activity-insight-alert {
    margin: 0 0 14px !important;
    border-radius: 10px !important;
}

.activity-insight-alert .mud-alert-message {
    width: 100%;
}

.activity-insight {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 0 0 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent), transparent 60%),
        var(--mud-palette-surface);
}

.activity-insight-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1565c0;
    background: color-mix(in srgb, #1565c0 16%, transparent);
}

.activity-insight--outcomes .activity-insight-icon {
    color: #ef6c00;
    background: color-mix(in srgb, #ef6c00 16%, transparent);
}

.activity-insight--cost .activity-insight-icon {
    color: #2e7d32;
    background: color-mix(in srgb, #2e7d32 16%, transparent);
}

.activity-insight-title {
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.25;
    margin: 0 0 2px;
}

.activity-insight-body {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.activity-chart-hint {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-background));
    border-left: 3px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

@keyframes activity-kpi-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes activity-chart-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.activity-kpi-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.activity-kpi-icon {
    color: var(--mud-palette-primary);
    opacity: 0.9;
}

.activity-kpi-card--chat .activity-kpi-icon { color: #1565c0; }
.activity-kpi-card--search .activity-kpi-icon { color: #00897b; }
.activity-kpi-card--propose .activity-kpi-icon { color: #455a64; }
.activity-kpi-card--click .activity-kpi-icon { color: #ef6c00; }

.activity-kpi-value {
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 4px;
}

.activity-kpi-rate {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.activity-chart-card {
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 80%, transparent);
    box-shadow: none !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 3%, transparent), transparent 36%),
        var(--mud-palette-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.activity-chart-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-lines-default));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) !important;
}

.activity-chart-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.activity-chart-card-head--spread {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.activity-chart-card-icon {
    margin-top: 2px;
    color: var(--mud-palette-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

.activity-charts-pane .activity-chart-card .mud-chart {
    width: 100%;
    min-height: unset;
    min-width: unset;
}

.activity-charts-pane .activity-chart-card .mud-chart svg {
    width: 100% !important;
    max-width: 100%;
}

.activity-charts-pane .activity-chart-card .mud-chart .mud-chart-legend {
    padding: 2px 0 0;
    margin: 0;
}

.activity-charts-pane .activity-chart-card .mud-chart.mud-chart-legend-bottom .mud-chart-legend {
    margin-top: 2px;
}

.activity-charts-pane .activity-chart-card .mud-charts-xaxis {
    font-size: 0.7rem;
}

/* Line draw is handled in activity-charts.js (getTotalLength) — more reliable than CSS selectors. */

@media (prefers-reduced-motion: reduce) {
    .activity-funnel--animated .activity-funnel-step,
    .activity-funnel--animated .activity-funnel-arrow,
    .activity-funnel--animated .activity-funnel-num,
    .activity-kpi-card--enter,
    .activity-chart-card--enter,
    .activity-guide-tab-card,
    .activity-anim-play .activity-kpi-card--enter,
    .activity-anim-play .activity-chart-card--enter {
        animation: none !important;
    }

    .activity-kpi-card:hover,
    .activity-chart-card:hover {
        transform: none;
    }
}

@media (max-width: 600px) {
    .activity-funnel-arrow {
        display: none;
    }

    .activity-funnel {
        flex-direction: column;
        align-items: flex-start;
    }
}

.activity-demo-matrix-table .activity-demo-matrix-row {
    cursor: pointer;
}

.activity-demo-matrix-table .activity-demo-matrix-row:hover td {
    background-color: rgba(25, 118, 210, 0.08);
}

.activity-report-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.activity-report-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 70vh;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    background: #f5f7fa;
}

/* Keep assigned column widths so chips wrap on load; leave table width as
   max-content (from .admin-table-full) so ColumnResizeMode=Container can
   grow past the viewport with HorizontalScrollbar. */
.mud-data-grid.course-tagging-table table.mud-table-root {
    table-layout: fixed;
}

.course-tagging-table td {
    vertical-align: top;
}

.course-tagging-table .tagging-col-chips,
.course-tagging-table .tagging-col-synonyms {
    overflow: hidden;
    white-space: normal;
}

.course-tagging-table .tagging-chip-row,
.course-tagging-table .tagging-syn-collapsed-row {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.tagging-course-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.tagging-course-id {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.tagging-course-extra {
    display: block;
    margin-top: 0.2rem;
}

.tagging-link {
    display: block;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.75rem;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.tagging-link:hover {
    opacity: 0.85;
}

.tagging-intro {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: pre-wrap;
    text-align: justify;
}

.tagging-muted {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.tagging-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.tagging-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    min-height: 1.55rem;
    padding: 0.15rem 0.3rem 0.15rem 0.55rem;
    border: 1px solid rgba(36, 52, 71, 0.1);
    border-radius: 999px;
    background: #f7f8fa;
    color: #2c3a4a;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.tagging-chip-primary {
    --tag-fill: 0%;
    --tag-fill-color: #c3d6ec;
    --tag-rest-color: #edf4fc;
    overflow: hidden;
    border-color: rgba(26, 75, 140, 0.18);
    background: linear-gradient(
        to right,
        var(--tag-fill-color) 0%,
        var(--tag-fill-color) var(--tag-fill),
        var(--tag-rest-color) var(--tag-fill),
        var(--tag-rest-color) 100%
    );
    color: #164a86;
    padding: 0 0.3rem 0 0;
}

.tagging-chip-primary:hover {
    border-color: rgba(26, 75, 140, 0.32);
}

.tagging-chip-label {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tagging-chip-label:disabled {
    cursor: default;
}

.tagging-chip-primary .tagging-chip-label {
    padding: 0.15rem 0.1rem 0.15rem 0.55rem;
    margin: -0.15rem 0;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}

.tagging-chip-synonym {
    --tag-fill: 0%;
    --tag-fill-color: #f0b4b4;
    --tag-rest-color: #fff5f5;
    border-color: rgba(198, 40, 40, 0.22);
    color: #b71c1c;
    overflow: hidden;
    background: linear-gradient(
        to right,
        var(--tag-fill-color) 0%,
        var(--tag-fill-color) var(--tag-fill),
        var(--tag-rest-color) var(--tag-fill),
        var(--tag-rest-color) 100%
    );
}

.tagging-chip-synonym .tagging-chip-label {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: default;
}

.tagging-chip-suggest-synonym {
    border: 1px dashed rgba(196, 104, 12, 0.55);
    color: #9a4e05;
}

.tagging-chip-suggest-synonym:hover:not(:disabled) {
    border-style: solid;
    border-color: rgba(196, 104, 12, 0.75);
}

/* Orange weight bar (same pattern as applied synonyms / tags). Must follow base suggest-synonym. */
.tagging-chip-suggest-synonym.tagging-chip-weight-fill {
    --tag-fill: 0%;
    --tag-fill-color: #f5d4a8;
    --tag-rest-color: #fffaf3;
    border: 1px dashed rgba(196, 104, 12, 0.55);
    color: #8a4500;
    overflow: hidden;
    background: linear-gradient(
        to right,
        var(--tag-fill-color) 0%,
        var(--tag-fill-color) var(--tag-fill),
        var(--tag-rest-color) var(--tag-fill),
        var(--tag-rest-color) 100%
    ) !important;
}

.tagging-chip-suggest-synonym.tagging-chip-weight-fill:hover:not(:disabled) {
    --tag-fill-color: #efc58a;
    --tag-rest-color: #fff3e0;
    border-style: solid;
    border-color: rgba(196, 104, 12, 0.8);
}

.tagging-chip-suggest {
    padding-right: 0.55rem;
    cursor: pointer;
    box-shadow: none;
}

.tagging-chip-suggest-tag {
    border: 1px dashed rgba(46, 125, 50, 0.55);
    background: linear-gradient(180deg, #f1faf2 0%, #e3f5e5 100%);
    color: #1b5e20;
}

/* Weight progress fill (same pattern as .tagging-chip-primary) for suggest / preview chips. */
.tagging-chip-weight-fill {
    --tag-fill: 0%;
    --tag-fill-color: #c3d6ec;
    --tag-rest-color: #edf4fc;
    overflow: hidden;
    background: linear-gradient(
        to right,
        var(--tag-fill-color) 0%,
        var(--tag-fill-color) var(--tag-fill),
        var(--tag-rest-color) var(--tag-fill),
        var(--tag-rest-color) 100%
    );
}

.tagging-chip-suggest-tag.tagging-chip-weight-fill {
    --tag-fill-color: #b7dfb9;
    --tag-rest-color: #eef8ef;
}

.tagging-chip-suggest-selected {
    border-style: solid;
    border-color: rgba(46, 125, 50, 0.85);
    background: linear-gradient(180deg, #d8efdb 0%, #c5e6c9 100%);
    color: #145218;
    box-shadow: 0 0 0 1px rgba(46, 125, 50, 0.2);
}

.tagging-chip-suggest-selected.tagging-chip-weight-fill {
    --tag-fill-color: #8ecf94;
    --tag-rest-color: #d8efdb;
    background: linear-gradient(
        to right,
        var(--tag-fill-color) 0%,
        var(--tag-fill-color) var(--tag-fill),
        var(--tag-rest-color) var(--tag-fill),
        var(--tag-rest-color) 100%
    );
}

.tagging-chip-weight-fill-old {
    --tag-fill-color: #d5dde8;
    --tag-rest-color: #f3f5f8;
    border: 1px solid rgba(90, 100, 112, 0.28);
    color: #455a64;
    padding-right: 0.55rem;
}

.tagging-chip-weight-fill-new {
    --tag-fill-color: #c3d6ec;
    --tag-rest-color: #edf4fc;
    border: 1px solid rgba(26, 75, 140, 0.28);
    color: #164a86;
    padding-right: 0.55rem;
}

.tagging-chip-weight-fill-changed {
    --tag-fill-color: #9bbfe3;
    --tag-rest-color: #e3eef9;
    border-color: rgba(26, 75, 140, 0.45);
}

.tagging-chip-suggest-selected:hover:not(:disabled) {
    border-color: rgba(27, 94, 32, 0.9);
    background: linear-gradient(180deg, #cfe9d2 0%, #b7deb9 100%);
}

.tagging-chip-suggest-selected.tagging-chip-weight-fill:hover:not(:disabled) {
    --tag-fill-color: #7ac481;
    --tag-rest-color: #cfe9d2;
    background: linear-gradient(
        to right,
        var(--tag-fill-color) 0%,
        var(--tag-fill-color) var(--tag-fill),
        var(--tag-rest-color) var(--tag-fill),
        var(--tag-rest-color) 100%
    );
}

.tagging-chip-suggest:disabled,
.tagging-chip-x:disabled,
.tagging-chip-label:disabled {
    opacity: 0.45;
    cursor: default;
}

.tagging-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transition: background-color 0.12s ease, opacity 0.12s ease, color 0.12s ease;
}

.tagging-chip-x:hover:not(:disabled) {
    background: rgba(36, 52, 71, 0.12);
    opacity: 1;
}

.tagging-chip-primary .tagging-chip-x:hover:not(:disabled) {
    background: rgba(22, 74, 134, 0.16);
    color: #0f3a6d;
}

.tagging-chip-synonym .tagging-chip-x:hover:not(:disabled) {
    background: rgba(183, 28, 28, 0.14);
    color: #8b1515;
}

.tagging-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.tagging-actions-compact {
    flex-wrap: nowrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.tagging-actions-compact .mud-button-root {
    min-width: 0;
    padding: 0 8px;
    height: 30px;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
}

.tagging-actions-compact .mud-button-label {
    gap: 4px;
}

.tagging-actions-compact .mud-button-root .mud-button-icon-start {
    margin-inline-end: 4px;
    font-size: 1.05rem !important;
}

.tagging-actions-compact .mud-icon-root {
    font-size: 1.05rem !important;
}

.confidence-meter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 88px;
    max-width: 120px;
}

.confidence-meter-bar {
    width: 100%;
    border-radius: 999px;
    overflow: hidden;
}

.confidence-meter-label {
    display: block;
    text-align: center;
    margin-top: 2px;
    line-height: 1.1;
}

.tagging-syn-editor {
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.tagging-syn-collapsed-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.tagging-syn-collapsed-row .tagging-chip-synonym-collapsed {
    cursor: pointer;
    padding-right: 0.55rem;
}

.tagging-syn-collapsed-row .tagging-chip-synonym-collapsed:hover {
    border-color: rgba(198, 40, 40, 0.4);
}

.tagging-syn-empty {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.tagging-syn-empty:hover {
    color: #b71c1c;
}

.tagging-syn-canonical {
    margin-bottom: 0.35rem;
}

.tagging-syn-canonical-chip {
    /* No remove-x on the synonym canonical header — match tag weight chip fill. */
    padding-right: 0.55rem;
}

.tagging-syn-canonical-chip .tagging-chip-label {
    cursor: default;
}

/* Compact filter bars across admin pages */
.admin-filters {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
}

.admin-filters .mud-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    --mudblazor-grid-spacing: 4px;
}

.admin-filters .mud-grid-item {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.admin-filters .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.admin-filters .mud-input-control > .mud-input-control-input-container {
    margin-top: 0 !important;
}

/* Courses page: ranker accept/reject overlay (does not hide rows) */
.mud-table-row.course-rank-accepted,
.mud-table-row.course-rank-accepted > td {
    background-color: #e8f5e9 !important;
}

.mud-table-row.course-rank-rejected,
.mud-table-row.course-rank-rejected > td {
    background-color: #ffebee !important;
}

/* Courses page: soft-filter control groups (match profile Budget/Duration/Time chip colors) */
.admin-filters .courses-soft-group {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 6px 8px 4px !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
}

.admin-filters .courses-soft-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 2px;
    opacity: 0.9;
}

.admin-filters-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 2px 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1.2;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.admin-filters-toggle:hover {
    color: var(--mud-palette-text-primary);
}

.admin-filters-toggle .mud-icon-root {
    font-size: 1.1rem !important;
}

.admin-filters-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.admin-filters-chip {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-filters-chip-basic {
    color: var(--mud-palette-text-secondary);
}

.admin-filters-chip-budget {
    color: #c62828;
}

.admin-filters-chip-duration {
    color: #1565c0;
}

.admin-filters-chip-time {
    color: #ef6c00;
}

.admin-filters-chip-ranker {
    color: #546e7a;
}

.admin-filters .courses-soft-group-budget {
    border-color: #e53935;
}

.admin-filters .courses-soft-group-budget .courses-soft-group-label {
    color: #c62828;
}

.admin-filters .courses-soft-group-duration {
    border-color: #1e88e5;
}

.admin-filters .courses-soft-group-duration .courses-soft-group-label {
    color: #1565c0;
}

.admin-filters .courses-soft-group-time {
    border-color: #fb8c00;
}

.admin-filters .courses-soft-group-time .courses-soft-group-label {
    color: #ef6c00;
}

.admin-filters .courses-soft-group-ranker {
    border-color: #78909c;
}

.admin-filters .courses-soft-group-ranker .courses-soft-group-label {
    color: #546e7a;
}

/* Keep text fields, selects, and autocomplete the same control height */
.admin-filters .mud-input.mud-input-outlined,
.admin-filters .mud-select .mud-input.mud-input-outlined,
.admin-filters .mud-autocomplete .mud-input.mud-input-outlined {
    margin-top: 8px !important; /* room for floating label */
    min-height: 28px !important;
    height: 28px !important;
}

.admin-filters .mud-input > input.mud-input-root,
.admin-filters .mud-input input.mud-input-root,
.admin-filters .mud-select .mud-input > input.mud-input-root,
.admin-filters .mud-autocomplete .mud-input > input.mud-input-root,
.admin-filters .mud-input-slot,
.admin-filters .mud-select-input,
.admin-filters .mud-input-root-outlined,
.admin-filters .mud-input-root-outlined.mud-input-root-margin-dense {
    box-sizing: border-box !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-height: 28px !important;
    height: 28px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
    mask-image: none !important;
}

.admin-filters .mud-input-adornment {
    margin: 0 !important;
    height: 28px !important;
}

.admin-filters .mud-input-adornment .mud-icon-button {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
}

.admin-filters .mud-select-input {
    display: flex !important;
    align-items: center !important;
}

.admin-filters .mud-input-outlined .mud-input-outlined-border {
    border-radius: 4px;
}

.admin-filters .mud-input-label-inputcontrol {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
}

.admin-filters .mud-input-control-helper-container {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.admin-filters .mud-button-root {
    min-height: 28px !important;
    height: 28px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 0.8125rem !important;
}

.admin-filters .d-flex.align-end {
    align-items: flex-end !important;
    padding-top: 8px !important; /* match outlined label offset */
    gap: 4px !important;
}

.admin-stats {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
}

/* Keep CPU/RAM gauge cards the same height even when captions differ. */
.perf-gauge-card {
    width: 100%;
    height: 100%;
    min-height: 240px;
}

.perf-gauge-footer {
    min-height: 2.75rem;
    width: 100%;
    text-align: center;
    line-height: 1.35;
}

/* Visible track ring behind MudProgressCircular gauges */
.perf-gauge {
    position: relative;
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MudProgressCircular uses viewBox 0 0 44 44 with stroke in SVG units.
   StrokeWidth 5 ? 5/44*112 ? 12.7px on screen ? match the track to that. */
.perf-gauge::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 13px solid rgba(33, 33, 33, 0.14);
    box-sizing: border-box;
    pointer-events: none;
}

.perf-gauge .mud-progress-circular {
    position: relative;
    z-index: 1;
}

.perf-history-slider {
    margin: 0 4px;
}

.perf-chart-shell {
    width: 100%;
    --perf-empty-ratio: 1;
    --perf-fill-ratio: 0;
}

.perf-chart-canvas {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.perf-chart-canvas .mud-chart {
    height: 100%;
    background: transparent;
}

.perf-chart-canvas .mud-chart svg {
    background: transparent;
}

/* Hide padded right-hand series so points stay left-aligned; keep full grid visible. */
.perf-chart-canvas .mud-chart-serie {
    clip-path: inset(0 calc(var(--perf-empty-ratio, 0) * 100%) 0 0);
}

/* Problem synonyms ? table scrolls as a whole; affected courses fills remaining width */
.tag-overlap-table {
    width: 100%;
}

.tag-overlap-table .mud-table-container {
    overflow: auto;
}

.tag-overlap-table table {
    width: 100%;
    table-layout: auto;
}

.tag-overlap-courses-cell {
    width: 100%;
    vertical-align: top !important;
}

.tag-overlap-courses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: flex-start;
}

.tag-overlap-course-chip {
    display: inline-block;
    max-width: 100%;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    line-height: 1.35;
    word-break: break-word;
    border: 1px solid transparent;
}

.tag-overlap-course-chip[data-tone="0"] {
    background: #eef4fb;
    border-color: rgba(26, 75, 140, 0.14);
    color: #1a4b8c;
}

.tag-overlap-course-chip[data-tone="1"] {
    background: #f3f8ef;
    border-color: rgba(56, 110, 40, 0.16);
    color: #2f5d22;
}

.tag-overlap-course-chip[data-tone="2"] {
    background: #fbf4ea;
    border-color: rgba(166, 108, 12, 0.16);
    color: #8a5700;
}

.tag-overlap-course-chip[data-tone="3"] {
    background: #f7eef6;
    border-color: rgba(110, 50, 110, 0.14);
    color: #6b346b;
}

.tag-overlap-resolve-list {
    max-height: min(50dvh, 480px);
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* LLM Prompts ? chat workflow flowchart */
.prompt-flow-paper {
    overflow-x: auto;
}

.prompt-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.prompt-flow-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
}

.prompt-flow-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.45rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    max-width: 280px;
}

.prompt-flow-pill-path {
    background: #f4f6f8;
    color: #3d4a5c;
    width: 100%;
    max-width: 280px;
}

.prompt-flow-pill-title {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.prompt-flow-pill-desc {
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.prompt-flow-connector {
    width: 2px;
    height: 1.1rem;
    background: var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.prompt-flow-branch-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.prompt-flow-fanout {
    /* Span from center of col 1 to center of col 3 (3 equal columns, gap 0.85rem) */
    width: calc((100% + 0.85rem) * 2 / 3);
    margin-left: calc((100% - 1.7rem) / 6);
    margin-right: auto;
    height: 14px;
    border: 2px solid var(--mud-palette-lines-default);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    margin-bottom: -2px;
    box-sizing: border-box;
}

.prompt-flow-branches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
    align-items: start;
}

.prompt-flow-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.prompt-flow-parallel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    align-items: stretch;
}

.prompt-flow-parallel .prompt-flow-node {
    max-width: none;
}

.prompt-flow-parallel-label {
    text-align: center;
    font-style: italic;
}

.prompt-used-on {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.prompt-flow-node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    max-width: 280px;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(26, 75, 140, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef4fc 100%);
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.prompt-flow-node:hover {
    border-color: rgba(26, 75, 140, 0.45);
    box-shadow: 0 2px 8px rgba(26, 75, 140, 0.12);
    transform: translateY(-1px);
}

.prompt-flow-node.is-missing {
    border-color: rgba(198, 140, 12, 0.45);
    background: linear-gradient(180deg, #fffaf0 0%, #fff3de 100%);
}

.prompt-flow-node-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #164a86;
    line-height: 1.3;
}

.prompt-flow-node-file,
.prompt-file-name {
    font-family: Consolas, Menlo, Monaco, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
    word-break: break-all;
}

.prompt-flow-node.is-missing .prompt-flow-node-title {
    color: #8a5700;
}

.prompt-flow-missing {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(198, 140, 12, 0.16);
    color: #8a5700;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.prompt-flow-node-role {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    opacity: 0.85;
}

.prompt-flow-node-desc {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.prompt-flow-node-meta {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.85;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 900px) {
    .prompt-flow-fanout {
        display: none;
    }

    .prompt-flow {
        min-width: 0;
    }

    .prompt-flow-branches {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        width: min(100%, 320px);
        margin-inline: auto;
    }

    .prompt-flow-branch + .prompt-flow-branch {
        border-top: 1px dashed var(--mud-palette-lines-default);
        padding-top: 1rem;
    }

    .prompt-flow-parallel {
        grid-template-columns: 1fr;
    }
}

/* Conversation flow · how-a-turn-works guide */
.mud-dialog.conversation-pipeline-diagram-dialog,
.conversation-pipeline-diagram-dialog.mud-dialog,
.conversation-pipeline-diagram-dialog {
    width: min(92vw, 900px) !important;
    max-width: 92vw !important;
    max-height: 90vh;
}

.conversation-pipeline-diagram-dialog .mud-dialog-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(90vh - 120px);
}

.pipeline-guide-scroll {
    overflow: auto;
    flex: 1 1 auto;
    padding: 0.15rem 0.2rem 0.5rem;
}

.pipeline-guide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 0.5rem;
}

.pipeline-guide-box {
    padding: 0.9rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 40, 70, 0.04);
}

.pipeline-guide-box-user {
    border-left: 4px solid #37474f;
}

.pipeline-guide-box-router {
    border-left: 4px solid #0288d1;
    background: linear-gradient(180deg, #f7fbff 0%, #fff 100%);
}

.pipeline-guide-box-outcome {
    border-left: 4px solid #2e7d32;
    background: linear-gradient(180deg, #f5faf5 0%, #fff 100%);
}

.pipeline-guide-box-click {
    border-left: 4px solid #c62828;
}

.pipeline-guide-box-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.pipeline-guide-box-desc {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.55rem;
}

.pipeline-guide-aside {
    margin-top: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 167, 38, 0.1);
    border: 1px dashed rgba(245, 124, 0, 0.35);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
}

.pipeline-guide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.pipeline-guide-profile {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(26, 75, 140, 0.22);
}

.pipeline-guide-profile-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.35rem;
}

.pipeline-guide-chip {
    margin: 0 !important;
}

.pipeline-guide-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0;
    color: var(--mud-palette-text-secondary);
}

.pipeline-guide-arrow-line {
    display: block;
    width: 2px;
    height: 0.45rem;
    background: var(--mud-palette-lines-default);
}

.pipeline-guide-arrow-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    max-width: 280px;
    line-height: 1.3;
    padding: 0.15rem 0.5rem;
    color: var(--mud-palette-text-secondary);
}

.pipeline-guide-arrow-head {
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--mud-palette-lines-default);
}

.pipeline-guide-paths-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0.15rem 0 0.65rem;
    text-align: center;
}

.pipeline-guide-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.pipeline-guide-path {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.75rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(26, 75, 140, 0.16);
    background: #fff;
    min-width: 0;
}

.pipeline-guide-path-span {
    grid-column: 1 / -1;
}

.pipeline-guide-path-num {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #164a86;
    background: #e3eef9;
    border: 1px solid rgba(26, 75, 140, 0.22);
}

.pipeline-guide-path-body {
    min-width: 0;
    flex: 1;
}

.pipeline-guide-path-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.pipeline-guide-path-desc {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.45rem;
}

.pipeline-guide-flowline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #164a86;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    background: #f0f5fb;
}

.pipeline-guide-flowline-arrow {
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.pipeline-guide-glossary {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: #f5f6f8;
    border: 1px solid var(--mud-palette-lines-default);
}

.pipeline-guide-glossary-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.35rem;
}

.pipeline-guide-glossary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.pipeline-guide-glossary li {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.2rem;
}

.pipeline-guide-glossary li strong {
    color: var(--mud-palette-text-primary);
}

.live-update-page {
    position: relative;
    min-height: 50vh;
}

.live-update-blocking {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 28px;
    border-radius: 12px;
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 12px 32px rgba(28, 35, 45, 0.18);
    min-width: min(360px, 86vw);
}

.live-update-blocking-bar {
    width: min(320px, 70vw);
}

.live-update-diff-cell {
    max-width: 320px;
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
    font-size: 0.82rem;
    line-height: 1.45;
}

.live-update-diff-del,
.text-diff-del {
    background: color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
    color: inherit;
    padding: 0 0.1em;
    border-radius: 2px;
    text-decoration: line-through;
}

.live-update-diff-ins,
.text-diff-ins {
    background: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
    color: inherit;
    padding: 0 0.1em;
    border-radius: 2px;
}

.live-update-errors-line {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #8a2f2f;
    background-color: color-mix(in srgb, #e57373 22%, transparent);
    cursor: pointer;
    user-select: none;
}

.live-update-errors-line:hover {
    background-color: color-mix(in srgb, #e57373 32%, transparent);
}

.live-update-status-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.live-update-started {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 85%, transparent);
    white-space: nowrap;
}

.live-update-started-icon {
    font-size: 0.95rem !important;
    width: 0.95rem !important;
    height: 0.95rem !important;
    opacity: 0.7;
}

.live-update-status-chip {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.live-update-progress-paused .mud-progress-linear-bar {
    animation: live-update-progress-blink 1.15s ease-in-out infinite;
}

@keyframes live-update-progress-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.mud-table-row.live-update-row-intro-large,
.mud-table-row.live-update-row-intro-large > td {
    background-color: color-mix(in srgb, #e57373 22%, transparent) !important;
}

.mud-table-row.live-update-diff-child-row,
.mud-table-row.live-update-diff-child-row > td,
.live-update-diff-child-cell {
    background-color: var(--mud-palette-surface, #fff) !important;
}

.live-update-diff-expand {
    background: transparent;
}

.live-update-intro-threshold {
    max-width: 100px;
}

.live-update-intro-threshold .mud-input-control-helper-container,
.live-update-intro-threshold .mud-input-helper-text {
    display: none;
}

.live-update-intro-threshold .mud-input-slot,
.live-update-intro-threshold .mud-input > input {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 32px;
}

@media (max-width: 700px) {
    .pipeline-guide-paths {
        grid-template-columns: 1fr;
    }

    .pipeline-guide-path-span {
        grid-column: auto;
    }
}

/* Language dropdown flags (SVG — Windows cannot render emoji flags). */
.lang-select-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.2;
}

.lang-select-flag {
    width: 1.15rem;
    height: 0.85rem;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

/* ===== Help guides ===== */
.help-guide {
    max-width: 1100px;
    margin: 0 auto 2rem;
}

.help-guide-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.35rem 1.5rem;
    border-radius: 14px;
    margin-bottom: 1rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 75%, transparent);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 55%),
        var(--mud-palette-surface);
}

.help-guide-hero--search {
    background:
        linear-gradient(145deg, color-mix(in srgb, #00897b 14%, transparent), transparent 55%),
        var(--mud-palette-surface);
}

.help-guide-hero--chat {
    background:
        linear-gradient(145deg, color-mix(in srgb, #1565c0 14%, transparent), transparent 55%),
        var(--mud-palette-surface);
}

.help-guide-hero--flow {
    background:
        linear-gradient(145deg, color-mix(in srgb, #6a1b9a 12%, transparent), transparent 55%),
        var(--mud-palette-surface);
}

.help-guide-hero--glossary {
    background:
        linear-gradient(145deg, color-mix(in srgb, #455a64 12%, transparent), transparent 55%),
        var(--mud-palette-surface);
}

.help-guide-eyebrow {
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.help-guide-lead {
    max-width: 46rem;
    color: var(--mud-palette-text-secondary);
}

.help-guide-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.help-guide-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.help-guide-toc-chip {
    text-decoration: none !important;
}

.help-card {
    padding: 1.25rem 1.35rem;
    height: 100%;
    border-radius: 12px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.help-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.help-card-icon {
    margin-bottom: 0.65rem;
    opacity: 0.9;
}

.help-card--search .help-card-icon { color: #00897b; }
.help-card--chat .help-card-icon { color: #1565c0; }
.help-card--flow .help-card-icon { color: #6a1b9a; }
.help-card--glossary .help-card-icon { color: #455a64; }

.help-section {
    margin-bottom: 2rem;
}

.help-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.help-flow--wide {
    padding: 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-background) 80%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default);
}

.help-flow-branch {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.help-flow-node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    min-width: 7.5rem;
}

.help-flow-node--search { border-left: 4px solid #00897b; }
.help-flow-node--chat { border-left: 4px solid #1565c0; }
.help-flow-node--end { border-left: 4px solid #455a64; }
.help-flow-node--click { border-left: 4px solid #ef6c00; }
.help-flow-node--start { border-left: 4px solid #37474f; }

.help-flow-arrow {
    font-size: 1.25rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.help-flow--vertical {
    flex-direction: column;
    align-items: stretch;
}

.help-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.help-step + .help-step {
    margin-top: 0.55rem;
}

.help-step p {
    margin: 0.25rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.925rem;
}

.help-step-num {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: #00897b;
}

.help-step-num--dark { background: #37474f; }
.help-step-num--info { background: #1565c0; }
.help-step-num--teal { background: #00897b; }
.help-step-num--warn { background: #ef6c00; }
.help-step-num--purple { background: #6a1b9a; }
.help-step-num--ok { background: #2e7d32; }

.help-flowchart {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.help-flowchart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.help-flowchart-box {
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: center;
    min-width: 7rem;
}

.help-flowchart-box small {
    display: block;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.15rem;
}

.help-flowchart-box--accent {
    border-color: color-mix(in srgb, #00897b 55%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #00897b 8%, var(--mud-palette-surface));
}

.help-flowchart-box--warn {
    border-color: color-mix(in srgb, #ef6c00 55%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #ef6c00 8%, var(--mud-palette-surface));
}

.help-flowchart-box--end {
    border-color: color-mix(in srgb, #2e7d32 55%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #2e7d32 8%, var(--mud-palette-surface));
    font-weight: 600;
}

.help-flowchart-join {
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.help-flowchart-spacer {
    width: 4rem;
}

.help-flowchart--fanout {
    gap: 1rem;
}

.help-fanout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.help-fanout .help-flowchart-box {
    min-width: 0;
}

.help-mini-card {
    padding: 1rem;
    height: 100%;
    border-radius: 10px !important;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.help-mini-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, var(--mud-palette-lines-default)) !important;
}

.help-term-btn {
    border: none;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    border-radius: 4px;
    padding: 0 0.3rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.help-term-btn:hover {
    text-decoration: underline;
}

.help-bullets,
.help-numbered {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
}

.help-bullets li,
.help-numbered li {
    margin-bottom: 0.35rem;
}

.help-example {
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
}

.help-compare-table th,
.help-compare-table td {
    vertical-align: top;
}

.help-journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
}

.help-journey-step {
    padding: 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    min-height: 100%;
}

.help-journey-step p {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.help-journey-num {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #1565c0;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.help-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.65rem;
}

.help-kind-tile {
    text-align: left;
    padding: 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font: inherit;
    color: inherit;
}

.help-kind-tile:hover {
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 45%, var(--mud-palette-lines-default));
}

.help-kind-tile span {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.help-glossary-row {
    cursor: pointer;
}

.help-glossary-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

@media (max-width: 900px) {
    .help-journey {
        grid-template-columns: 1fr 1fr;
    }

    .help-flowchart-spacer {
        display: none;
    }

    .help-fanout {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .help-journey {
        grid-template-columns: 1fr;
    }

    .help-fanout {
        grid-template-columns: 1fr;
    }
}

/* ---- Decision board (Help · How the bot decides) ---- */
.help-guide-hero--decisions {
    background:
        linear-gradient(145deg, color-mix(in srgb, #f9a825 16%, transparent), transparent 55%),
        var(--mud-palette-surface);
}

.help-card--decisions .help-card-icon { color: #f9a825; }

.decision-board {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 1.15rem 1.25rem 1.35rem;
    background:
        radial-gradient(1200px 280px at 10% -10%, color-mix(in srgb, #f9a825 12%, transparent), transparent 60%),
        radial-gradient(900px 240px at 90% 0%, color-mix(in srgb, #1565c0 10%, transparent), transparent 55%),
        var(--mud-palette-surface);
}

.decision-board-scenarios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.decision-board-scenario {
    appearance: none;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    text-align: left;
    cursor: pointer;
    min-width: 11rem;
    max-width: 18rem;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.decision-board-scenario:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #f9a825 55%, var(--mud-palette-lines-default));
}

.decision-board-scenario.is-active {
    border-color: #f9a825;
    background: color-mix(in srgb, #f9a825 14%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #f9a825 35%, transparent);
}

.decision-board-scenario-quote {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

.decision-board-scenario-label {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.decision-board-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.15rem;
}

.decision-board-col {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 0.85rem;
    background: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
    min-height: 100%;
}

.decision-board-col--think {
    background:
        linear-gradient(180deg, color-mix(in srgb, #1565c0 8%, transparent), transparent 40%),
        color-mix(in srgb, var(--mud-palette-background) 40%, var(--mud-palette-surface));
}

.decision-board-col-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 650;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.65rem;
    color: var(--mud-palette-text-primary);
}

.decision-board-slots,
.decision-board-paths {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.decision-board-slot,
.decision-board-path {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem;
    align-items: start;
    padding: 0.5rem 0.55rem;
    border-radius: 10px;
    border: 1px solid transparent;
}

.decision-board-slot strong,
.decision-board-path strong {
    display: block;
    font-size: 0.82rem;
}

.decision-board-slot span,
.decision-board-path span {
    display: block;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

.decision-board-slot.is-off {
    opacity: 0.42;
    filter: grayscale(0.35);
}

.decision-board-slot.is-on {
    background: color-mix(in srgb, #43a047 12%, transparent);
    border-color: color-mix(in srgb, #43a047 35%, transparent);
}

.decision-board-checks {
    margin: 0 0 0.75rem;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.decision-board-check-q {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
}

.decision-board-check-a {
    display: block;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.decision-board-verdict {
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, #f9a825 16%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, #f9a825 40%, transparent);
}

.decision-board-verdict-kicker {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
    margin-bottom: 0.15rem;
}

.decision-board-verdict strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.decision-board-verdict p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.decision-board-path-badge {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--path-accent, #546e7a);
    flex-shrink: 0;
}

.decision-board-path.is-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    border-radius: 10px;
}

.decision-board-path-now {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: #f9a825;
    font-style: normal;
    font-weight: 650;
}

.decision-board-pipeline {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.decision-board-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
}

.decision-board-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    min-width: 10rem;
    flex: 1 1 10rem;
}

.decision-board-step strong {
    display: block;
    font-size: 0.82rem;
}

.decision-board-step span {
    display: block;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.decision-board-step-num {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #1565c0;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.decision-board-step-join {
    align-self: center;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.decision-board-onebreath {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.65rem;
}

.decision-board-onebreath-card {
    flex: 1 1 12rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.decision-board-onebreath-card--accent {
    border-color: color-mix(in srgb, #f9a825 45%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #f9a825 10%, var(--mud-palette-surface));
}

.decision-board-onebreath-num {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: #37474f;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.decision-board-onebreath-card strong {
    display: block;
    margin-bottom: 0.25rem;
}

.decision-board-onebreath-card p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.decision-board-onebreath-arrow {
    align-self: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.decision-path-letter {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: var(--path-accent, #546e7a);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}

.help-mini-card--path {
    min-height: 100%;
}

.pipeline-guide-decision-teaser {
    background: color-mix(in srgb, #f9a825 8%, var(--mud-palette-surface));
}

.pipeline-guide-decision-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

@media (max-width: 960px) {
    .decision-board-stage {
        grid-template-columns: 1fr;
    }
}

/* ---- Dark mode (html.mud-theme-dark) ---- */
html.mud-theme-dark .mud-main-content.admin-main {
    background: linear-gradient(180deg, #12181b 0%, #0e1417 100%);
}

html.mud-theme-dark .tagging-chip-primary {
    --tag-fill-color: #3d5f78;
    --tag-rest-color: #243442;
    border-color: rgba(126, 182, 201, 0.28);
    color: #d7ebf3;
}

html.mud-theme-dark .tagging-chip-synonym {
    --tag-fill-color: #7a3f45;
    --tag-rest-color: #3a2427;
    border-color: rgba(224, 122, 108, 0.35);
    color: #f0c4bf;
}

html.mud-theme-dark .tagging-chip-suggest-synonym.tagging-chip-weight-fill {
    --tag-fill-color: #8a6230;
    --tag-rest-color: #3a2e1c;
    border-color: rgba(224, 138, 85, 0.45);
    color: #f3d2a8;
}

html.mud-theme-dark .tagging-chip-suggest-tag.tagging-chip-weight-fill {
    --tag-fill-color: #3f6b48;
    --tag-rest-color: #243328;
    color: #cfe8d4;
}

html.mud-theme-dark .tagging-syn-editor {
    border-color: var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
}

html.mud-theme-dark .login-shell,
html.mud-theme-dark .app-boot {
    background: var(--mud-palette-background, #12181b);
}

html.mud-theme-dark .app-boot-card {
    background: var(--mud-palette-surface, #1a2226);
    color: var(--mud-palette-text-primary, #e8e4dc);
    border-color: var(--mud-palette-lines-default, #2a3439);
}

html.mud-theme-dark .help-flowchart-box,
html.mud-theme-dark .help-mini-card,
html.mud-theme-dark .help-example {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

/* Prompt workflow nodes */
html.mud-theme-dark .prompt-flow-pill-path {
    background: #243036;
    color: #c5ccd3;
}

html.mud-theme-dark .prompt-flow-node {
    border-color: rgba(126, 182, 201, 0.28);
    background: linear-gradient(180deg, #1e2a32 0%, #182228 100%);
    box-shadow: none;
    color: var(--mud-palette-text-primary, #e8e4dc);
}

html.mud-theme-dark .prompt-flow-node:hover {
    border-color: rgba(126, 182, 201, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html.mud-theme-dark .prompt-flow-node.is-missing {
    border-color: rgba(212, 168, 74, 0.45);
    background: linear-gradient(180deg, #2a2418 0%, #221c14 100%);
}

html.mud-theme-dark .prompt-flow-node-title {
    color: #9ec9db;
}

html.mud-theme-dark .prompt-flow-node.is-missing .prompt-flow-node-title {
    color: #e0bf6a;
}

html.mud-theme-dark .prompt-flow-missing {
    background: rgba(212, 168, 74, 0.18);
    color: #e0bf6a;
}

/* Pipeline / decision guide boxes */
html.mud-theme-dark .pipeline-guide-box,
html.mud-theme-dark .pipeline-guide-path {
    background: var(--mud-palette-surface, #1a2226);
    border-color: var(--mud-palette-lines-default, #2a3439);
}

html.mud-theme-dark .pipeline-guide-box-router {
    background: linear-gradient(180deg, #1a2830 0%, #1a2226 100%);
}

html.mud-theme-dark .pipeline-guide-box-outcome {
    background: linear-gradient(180deg, #1a2820 0%, #1a2226 100%);
}

html.mud-theme-dark .pipeline-guide-path-num {
    color: #9ec9db;
    background: #243442;
    border-color: rgba(126, 182, 201, 0.28);
}

/* Course editor sections forced white in light mode */
html.mud-theme-dark .course-section .mud-input-control,
html.mud-theme-dark .course-section .mud-picker,
html.mud-theme-dark .course-section .mud-table,
html.mud-theme-dark .course-section .mud-expand-panel,
html.mud-theme-dark .course-section .mud-paper,
html.mud-theme-dark .course-section .mud-input-control .mud-input-outlined,
html.mud-theme-dark .course-section .mud-input-control .mud-input-filled,
html.mud-theme-dark .course-section .mud-table .mud-table-container,
html.mud-theme-dark .course-section .mud-table .mud-table-root,
html.mud-theme-dark .course-lesson-card,
html.mud-theme-dark .course-lesson-title .mud-input-control {
    background-color: var(--mud-palette-surface, #1a2226) !important;
    background: var(--mud-palette-surface, #1a2226) !important;
}

/* Soft row / rank highlights */
html.mud-theme-dark .activity-row-clicked td {
    background-color: rgba(47, 125, 74, 0.22) !important;
}

html.mud-theme-dark .activity-row-clicked:hover td {
    background-color: rgba(47, 125, 74, 0.32) !important;
}

html.mud-theme-dark .mud-table-row.course-rank-accepted,
html.mud-theme-dark .mud-table-row.course-rank-accepted > td {
    background-color: rgba(47, 125, 74, 0.22) !important;
}

html.mud-theme-dark .mud-table-row.course-rank-rejected,
html.mud-theme-dark .mud-table-row.course-rank-rejected > td {
    background-color: rgba(224, 122, 108, 0.2) !important;
}

html.mud-theme-dark .mud-table-row.llm-row-cache-create,
html.mud-theme-dark .mud-table-row.llm-row-cache-create > td {
    background-color: rgba(255, 152, 0, 0.1) !important;
}

html.mud-theme-dark .mud-table-row.llm-row-cache-hit,
html.mud-theme-dark .mud-table-row.llm-row-cache-hit > td {
    background-color: rgba(33, 150, 243, 0.14) !important;
}

html.mud-theme-dark .tag-overlap-course-chip[data-tone="0"] {
    background: #1e2a36;
    border-color: rgba(126, 182, 201, 0.28);
    color: #9ec9db;
}

html.mud-theme-dark .tag-overlap-course-chip[data-tone="1"] {
    background: #1e2c20;
    border-color: rgba(95, 175, 120, 0.28);
    color: #a8d4b4;
}

html.mud-theme-dark .tag-overlap-course-chip[data-tone="2"] {
    background: #2a2418;
    border-color: rgba(212, 168, 74, 0.28);
    color: #e0bf6a;
}

html.mud-theme-dark .tag-overlap-course-chip[data-tone="3"] {
    background: #2a1e2a;
    border-color: rgba(180, 130, 180, 0.28);
    color: #d2b0d2;
}

/* App bar signed-in user */
.admin-user-chip {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    text-align: left;
}
.admin-user-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.admin-user-email {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-roles {
    font-size: 0.7rem;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty states */
.admin-empty-state-icon {
    font-size: 2.25rem !important;
    opacity: 0.45;
}

/* Command palette */
.admin-cmd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(12, 18, 22, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 24px;
}
.admin-cmd-dialog {
    width: min(560px, 100%);
    background: var(--mud-palette-surface, #fffdf9);
    color: var(--mud-palette-text-primary, #1e1a14);
    border: 1px solid var(--mud-palette-lines-default, #e5ddd0);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    padding: 12px;
}
.admin-cmd-list {
    max-height: min(52vh, 420px);
    overflow: auto;
}
.admin-cmd-item-active {
    background: var(--mud-palette-table-hover, rgba(31, 78, 95, 0.08)) !important;
}

.admin-kpi-actions {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* —— Mobile shell / dense layouts —— */
.admin-appbar-title-short {
    display: none;
}

.admin-user-chip-icon {
    margin-right: 0.25rem;
}

@media (max-width: 600px) {
    :root {
        --admin-page-pad-y: 10px;
        --admin-fit-height: 220px;
    }

    .admin-main > .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .admin-appbar-title-full {
        display: none;
    }

    .admin-appbar-title-short {
        display: inline;
    }

    .admin-user-chip {
        max-width: none;
    }

    .admin-user-chip-text {
        display: none;
    }

    .admin-user-chip-icon {
        margin-right: 0;
    }

    .admin-user-menu-btn .mud-button-label {
        min-width: 0;
    }

    .mud-table.admin-table-full,
    .mud-data-grid.admin-table-full {
        --admin-fit-height: 220px;
    }

    .mud-table.admin-table-full > .mud-table-container,
    .mud-data-grid.admin-table-full > .mud-table-container {
        min-height: 220px;
    }

    .mud-data-grid.admin-table-full td.activity-chat-profile-cell,
    .mud-data-grid.admin-table-full th.activity-chat-profile-cell {
        min-width: 0;
        white-space: normal;
    }

    .admin-cmd-backdrop {
        padding: 8px 8px 16px;
        align-items: flex-start;
    }

    .admin-cmd-list {
        max-height: min(62vh, 380px);
    }

    .admin-cmd-hint-keys {
        display: none;
    }

    .live-update-status-meta {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }

    .live-update-started {
        white-space: normal;
    }

    .admin-filters-summary {
        flex: 1 1 auto;
    }

    .admin-page-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .mud-tabs .mud-tabs-panels.pa-4 {
        padding: 8px !important;
    }
}

/* Courses / dictionary compact columns (class set when IsNarrowSm). */
.mud-data-grid.admin-grid-mobile.admin-table-full > .mud-table-container {
    max-width: 100%;
}

.mud-data-grid.admin-grid-mobile.admin-table-full table.mud-table-root {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed;
}

.admin-grid-mobile .admin-grid-title-col {
    width: auto;
    min-width: 0;
}

.admin-grid-mobile .admin-grid-actions-col {
    width: 88px;
    white-space: nowrap;
}

.admin-grid-title {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.admin-grid-meta {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* Tag Manager course tagging cards (class set when IsNarrowMd ≤900px). */
.mud-data-grid.course-tagging-mobile.admin-table-full > .mud-table-container {
    max-width: 100%;
}

.mud-data-grid.course-tagging-mobile.admin-table-full table.mud-table-root {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
}

.course-tagging-mobile .mud-table-head {
    display: none;
}

.course-tagging-mobile .mud-table-body .mud-table-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    align-items: start;
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: none;
}

.course-tagging-mobile .mud-table-body .mud-table-cell {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border: none !important;
    border-right: none !important;
    padding: 4px 0 !important;
    background: transparent !important;
}

.course-tagging-mobile .mud-table-body .mud-table-cell:first-child {
    grid-column: 1;
    grid-row: 1;
    padding-top: 2px !important;
}

.course-tagging-mobile .mud-table-body .mud-table-cell.tagging-col-course {
    grid-column: 2;
    grid-row: 1;
}

.course-tagging-mobile .mud-table-body .mud-table-cell.tagging-col-chips,
.course-tagging-mobile .mud-table-body .mud-table-cell.tagging-col-synonyms {
    grid-column: 1 / -1;
    padding-top: 8px !important;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 80%, transparent) !important;
}

.course-tagging-mobile .mud-table-body .mud-table-cell.tagging-col-chips::before,
.course-tagging-mobile .mud-table-body .mud-table-cell.tagging-col-synonyms::before {
    display: block;
    margin-bottom: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.course-tagging-mobile .mud-table-body .mud-table-cell.tagging-col-chips::before {
    content: "Tags";
}

.course-tagging-mobile .mud-table-body .mud-table-cell.tagging-col-synonyms::before {
    content: "Synonyms";
}

.course-tagging-mobile .tagging-actions-compact .mud-button-root {
    flex: 1 1 auto;
}

/* Gemini prompt test: multiline textarea, vertically resizable */
.prompt-test-textarea .mud-input.mud-input-outlined {
    height: auto !important;
    min-height: 0 !important;
}

.prompt-test-textarea .mud-input.mud-input-outlined.mud-input-textarea {
    height: auto !important;
}

.prompt-test-textarea textarea.mud-input-slot,
.prompt-test-textarea .mud-input-slot.mud-input-root-multiline,
.prompt-test-textarea textarea.mud-input-root {
    height: auto !important;
    min-height: 16rem !important;
    max-height: none !important;
    resize: vertical !important;
    overflow-y: auto !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
}