/* Shared styles for the agent, profile and topic detail pages (SectionCard, DetailPageHeader)
   and the compact settings widgets. Global rather than scoped: the classes also sit on Radzen roots. */

/* ---- Header ---- */

/* Sticky at the top of the scrolling area. Needs no overflow/transform on the ancestors. */
.detail-page-header {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    background-color: #F4F6FA;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .detail-page-header {
    background-color: #333333;
}

.detail-page-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}

.detail-page-active {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.detail-page-active-label {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.detail-page-favorite.rz-button {
    padding: 0.25rem;
    min-width: 0;
}

.detail-page-favorite .favorite-star-icon {
    width: 20px;
    height: 20px;
}

.detail-page-actions-separator {
    width: 1px;
    height: 28px;
    background-color: #E5E7EB;
}

/* "..." menu: red text for the delete item, icon in the text color, rounded hover. */
.detail-page-more-menu.rz-menu {
    padding: 0.25rem;
    border-radius: 10px;
}

.detail-page-more-menu .rz-navigation-item,
.detail-page-more-menu .rz-navigation-item-wrapper,
.detail-page-more-menu .rz-navigation-item-link {
    border-radius: 8px;
    overflow: hidden;
}

.detail-page-more-menu .detail-page-menu-danger .rz-navigation-item-text {
    color: #E5484D !important;
}

.detail-page-more-menu .detail-page-menu-danger .rz-navigation-item-icon {
    color: var(--rz-text-color) !important;
}

/* Thin vertical separator (modifier of .vertical-separator). */
.vertical-separator.vertical-separator--thin {
    width: 0;
    height: 22px;
    margin: 0 0.25rem;
    border-width: 0 0 0 1px;
    border-color: #D9DCE3;
}

/* Borderless dropdown, same as the language dropdown in the top bar. */
.template-dropdown.rz-dropdown,
.template-dropdown.rz-dropdown.rz-state-focused,
.template-dropdown.rz-dropdown:focus-within {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.template-dropdown.rz-dropdown:hover:not(.rz-state-disabled) {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .vertical-separator.vertical-separator--thin {
    border-color: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .template-dropdown.rz-dropdown:hover:not(.rz-state-disabled) {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Content that stops short of the right edge of its section. */
.section-inset {
    max-width: 88%;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .detail-page-actions-separator {
    background-color: #4B4957;
}

/* ---- Collapsible sections ---- */

.section-card-collapsible.rz-card {
    padding: 0 !important;
    border: 1px solid #E5E7EB;
}

.section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
}

.section-card-subtitle {
    color: var(--rz-text-secondary-color);
}

.section-card-chevron {
    color: var(--rz-text-secondary-color);
}

.section-card-body {
    border-top: 1px solid #E5E7EB;
    padding: 1rem 1.25rem 1.25rem;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .section-card-collapsible.rz-card,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .section-card-body {
    border-color: #4B4957;
}

/* ---- Switch ----
   Also applied inside .file-grid: FileDialog is used by pages that have no .detail-page. */

:is(.detail-page, .file-grid) .rz-switch {
    width: 2rem;
    min-width: 2rem;
    height: 1.125rem;
}

:is(.detail-page, .file-grid) .rz-switch .rz-switch-circle {
    background: #D1D5DB;
    border-radius: 999px;
}

:is(.detail-page, .file-grid) .rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--rz-primary);
}

:is(.detail-page, .file-grid) .rz-switch .rz-switch-circle:before,
:is(.detail-page, .file-grid) .rz-switch.rz-switch-checked .rz-switch-circle:before {
    width: 0.875rem;
    height: 0.875rem;
    margin-block-start: -0.4375rem;
    inset-inline-start: 2px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

:is(.detail-page, .file-grid) .rz-switch.rz-switch-checked .rz-switch-circle:before {
    transform: translateX(0.875rem);
}

:is(.detail-page, .file-grid) .rz-switch .rz-switch-circle:hover:not(.rz-disabled):before,
:is(.detail-page, .file-grid) .rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled):before {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) :is(.detail-page, .file-grid) .rz-switch .rz-switch-circle {
    background: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) :is(.detail-page, .file-grid) .rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--rz-primary);
}

/* ---- Slider ---- */

.detail-page {
    --rz-slider-horizontal-height: 6px;
    --rz-slider-border: none;
    --rz-slider-border-radius: 999px;
    --rz-slider-background-color: #EEF0F4;
    --rz-slider-range-background-color: var(--rz-primary);
    --rz-slider-range-border: none;
    --rz-slider-handle-width: 12px;
    --rz-slider-handle-height: 12px;
    --rz-slider-handle-border-radius: 50%;
    --rz-slider-handle-background-color: #FFFFFF;
    --rz-slider-handle-border: 2px solid var(--rz-primary);
    --rz-slider-handle-shadow: none;
    --rz-slider-handle-hover-background-color: #FFFFFF;
    --rz-slider-handle-hover-border: 2px solid var(--rz-primary);
    --rz-slider-handle-hover-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .detail-page {
    --rz-slider-background-color: #4B4957;
    --rz-slider-handle-background-color: #2B2A33;
    --rz-slider-handle-hover-background-color: #2B2A33;
}

/* ---- Section tabs ---- */

.detail-tabs {
    --rz-tabs-tab-font-size: 0.875rem;
    --rz-tabs-tab-font-weight: 500;
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-letter-spacing: 0;
    --rz-tabs-tab-padding-block: 0.5rem;
    --rz-tabs-tab-padding-inline: 0;
    --rz-tabs-tab-color: var(--rz-text-secondary-color);
    --rz-tabs-tab-hover-background-color: transparent;
    --rz-tabs-tab-hover-color: var(--rz-text-title-color);
    --rz-tabs-tab-selected-color: var(--rz-text-title-color);
    --rz-tabs-padding: 1rem 0 0;
}

.detail-tabs.rz-tabview > .rz-tabview-nav {
    gap: 1.5rem;
    border-bottom: 1px solid #E5E7EB;
}

.detail-tabs.rz-tabview > .rz-tabview-nav .rz-tabview-selected {
    font-weight: 600;
    border-bottom-color: transparent !important;
}

.detail-tabs.rz-tabview > .rz-tabview-nav li {
    position: relative;
}

/* Underline under the selected tab covers half of the label. */
.detail-tabs.rz-tabview > .rz-tabview-nav .rz-tabview-selected::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 50%;
    height: 2px;
    background-color: var(--rz-primary);
}

.detail-tabs.rz-tabview > .rz-tabview-panels {
    border-top: none;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .detail-tabs.rz-tabview > .rz-tabview-nav {
    border-bottom-color: #4B4957;
}

/* ---- Empty cell placeholder ---- */

.empty-cell {
    color: var(--rz-text-disabled-color, #9CA3AF);
}

/* ---- File table (FileDialog) ---- */

.file-search {
    position: relative;
    width: 220px;
}

.file-search.file-search--full {
    width: 100%;
}

.file-search .file-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    z-index: 1;
}

.file-search .file-search-input.rz-textbox,
.file-search .rz-textbox.file-search-input:not(.rz-state-disabled) {
    padding-left: 2.1rem;
    background-color: #F4F6F9 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 8px;
    font-size: 0.85rem;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .file-search .file-search-input.rz-textbox,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .file-search .rz-textbox.file-search-input:not(.rz-state-disabled) {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Light grid: no frame, small gray headers, row dividers only. */
.file-grid.rz-data-grid {
    border: none;
    background-color: transparent;
}

.file-grid .rz-grid-table thead th {
    background-color: transparent;
    border-bottom: 1px solid #E5E7EB;
}

.file-grid .rz-grid-table thead th .rz-column-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
    text-transform: none;
}

.file-grid .rz-grid-table td {
    border-bottom: 1px solid #F0F1F4;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .file-grid .rz-grid-table thead th,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .file-grid .rz-grid-table td {
    border-bottom-color: #3A3944;
}

.file-grid .rz-badge {
    border-radius: 5px !important;
}

.file-row-icon.rzi {
    font-size: 1.2rem;
}

/* Folder names are links: same color as the names in the MCP Server list. */
.folder-name-link,
.rz-button .folder-name-link,
.rz-button:hover .folder-name-link {
    color: var(--rz-primary) !important;
    font-weight: 500;
}

.folder-badge {
    background-color: #ECEDF0 !important;
    color: #4B5563 !important;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .folder-badge {
    background-color: #4B4957 !important;
    color: #E5E7EB !important;
}

/* File status pill */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: #ECEDF0;
    color: #6B7280;
}

.status-pill--success {
    background-color: #DDF7F1;
    color: #0F9F85;
}

.status-pill--warning {
    background-color: #FEF3C7;
    color: #B45309;
}

.status-pill--error {
    background-color: #FEE2E2;
    color: #DC2626;
}

.status-pill--progress {
    background-color: #EEF0FD;
    color: #4F46E5;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .status-pill {
    background-color: #4B4957;
    color: #D1D5DB;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .status-pill--success {
    background-color: #1F4A42;
    color: #6EE7C8;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .status-pill--warning {
    background-color: #4D3B16;
    color: #FCD34D;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .status-pill--error {
    background-color: #4C2427;
    color: #FCA5A5;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .status-pill--progress {
    background-color: #1D2349;
    color: #C7CBFF;
}

/* ---- Agent tools (MCP, external agents, skills) ---- */

.tool-block {
    background-color: #F4F6FA;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

/* Radzen loads after this file and resets Body1 to weight 400: needs more specificity. */
.tool-block .tool-block-title.rz-text {
    font-weight: 600;
}

.tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 0.35rem 0.25rem 0.35rem 0.75rem;
}

/* Skill chip: domain color swatch, bold name, domain below (--domain-* from DomainBadgeStyle). */
.tool-chip--skill {
    padding-left: 0.5rem;
    min-width: 160px;
}

.tool-chip-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    background-color: var(--domain-bg);
}

.tool-chip-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.tool-chip-domain {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--domain-text, #6366F1);
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .tool-block {
    background-color: rgba(255, 255, 255, 0.06);
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .tool-chip {
    background-color: #2B2A33;
    border-color: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .tool-chip-swatch {
    background-color: var(--domain-bg-dark);
}

/* ---- Prompt: regenerate and tone chips ---- */

.system-prompt-wrapper {
    position: relative;
    width: 100%;
}

/* Room at the bottom of the prompt for the "Regenerate with AI" button. */
.system-prompt-wrapper textarea {
    padding-bottom: 3.25rem;
}

.system-prompt-wrapper .regenerate-prompt-button {
    position: absolute;
    right: 1rem;
    bottom: 1.25rem;
}

.ai-action-button.rz-button {
    text-transform: none;
    border-radius: 999px;
    border: 1px solid #C7D2FE;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF2FF 100%);
    color: #1F2937;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
}

.tone-chip.rz-button {
    text-transform: none;
    border-radius: 8px;
}

.tone-chip.tone-chip--selected.rz-button {
    background-color: #EEF0FD !important;
    border-color: #8B8FF0 !important;
    color: #4F46E5 !important;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .ai-action-button.rz-button {
    background: linear-gradient(180deg, #2B2A33 0%, #1D2349 100%);
    border-color: #5664E5;
    color: #E5E7EB;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .tone-chip.tone-chip--selected.rz-button {
    background-color: #1D2349 !important;
    border-color: #5664E5 !important;
    color: #C7CBFF !important;
}

/* ---- Settings column ---- */

.settings-card.rz-card {
    border: 1px solid #E5E7EB;
}

/* Parameters stop short of the right edge of the card. */
.settings-card-body {
    max-width: 360px;
}

.setting-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.setting-value {
    color: var(--rz-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.setting-help {
    color: var(--rz-text-secondary-color);
}

/* Segmented control: gray container, selected option on white and bold. */
.setting-segmented.rz-selectbar {
    display: inline-flex;
    width: auto;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background-color: #F1F2F6;
}

/* Single selector, no :not(:first-child): a more specific rule would repaint the selected option
   gray when it is not the first one. */
.setting-segmented.rz-selectbar .rz-button {
    text-transform: none;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border: none;
    border-radius: 6px !important;
    background-color: transparent;
    color: var(--rz-text-secondary-color);
    box-shadow: none;
}

.setting-segmented.rz-selectbar .rz-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.setting-segmented.rz-selectbar .rz-button.rz-state-active {
    background-color: #FFFFFF;
    color: var(--rz-text-title-color);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .setting-segmented.rz-selectbar {
    background-color: rgba(255, 255, 255, 0.06);
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .setting-segmented.rz-selectbar .rz-button.rz-state-active {
    background-color: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .settings-card.rz-card {
    border-color: #4B4957;
}

/* ---- Dark tooltip ---- */

.rz-tooltip.detail-tooltip .rz-tooltip-content {
    background-color: #111827;
    color: #F9FAFB;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

/* The arrow inherits background and border from the content. */
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .rz-tooltip.detail-tooltip .rz-tooltip-content {
    background-color: #0B0F19;
    border-color: rgba(255, 255, 255, 0.14);
}

/* ---- Non-collapsible section card: plain titled card, no divider ---- */

.section-card-static .section-card-header {
    cursor: default;
}

.section-card-static .section-card-body {
    border-top: none;
    padding-top: 0;
}

/* ---- Index status panel (profile page) ---- */

.index-status-card.rz-card {
    border: 1px solid #E5E7EB;
}

.index-stats-box {
    background-color: #F4F6FA;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.index-stats-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.index-stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.index-stats-updated {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--rz-text-disabled-color, #9CA3AF);
}

.profile-id-row {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.profile-id-label {
    font-size: 0.7rem;
}

.profile-id-value {
    flex: 1 1 auto;
    min-width: 0;
}

.index-status-divider {
    width: 100%;
    margin: 0;
    border: none;
    border-top: 1px solid #E5E7EB;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-status-card.rz-card,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-status-divider {
    border-color: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-stats-box {
    background-color: rgba(255, 255, 255, 0.06);
}

/* ---- Manage icon in the file table (SVG used as a mask so it follows the text color) ---- */

.manage-file-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("../../images/icons/manage-file-icon.svg") center / contain no-repeat;
    mask: url("../../images/icons/manage-file-icon.svg") center / contain no-repeat;
}

/* ---- Dialogs: rounded, title edge to edge with a separator ---- */

/* !important: Radzen sets its own radius on the dialog box. */
.detail-dialog,
.confirm-reindex-dialog {
    border-radius: 16px !important;
    overflow: hidden;
}

.detail-dialog .rz-dialog-titlebar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #E5E7EB;
}

/* Beats ".custom-dialog .rz-dialog-title" of the pages (indented title). */
.detail-dialog.custom-dialog .rz-dialog-title,
.detail-dialog .rz-dialog-title {
    margin-left: 0;
}

.detail-dialog .rz-dialog-content {
    padding: 1rem 1.5rem 1.5rem;
}

.confirm-reindex-dialog .rz-dialog-titlebar {
    padding: 1.25rem 1.5rem 0.25rem;
}

.confirm-reindex-dialog .rz-dialog-content {
    padding: 0.5rem 1.5rem 1.5rem;
}

/* Dialog with a subtitle: the separator goes under the subtitle, before the search. */
.detail-dialog--subtitle .rz-dialog-titlebar {
    border-bottom: none;
    padding-bottom: 0.25rem;
}

.detail-dialog--subtitle .all-entities-subtitle {
    margin: -0.5rem -1.5rem 0;
    padding: 0 1.5rem 0.9rem;
    border-bottom: 1px solid #E5E7EB;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .detail-dialog--subtitle .all-entities-subtitle {
    border-bottom-color: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .detail-dialog .rz-dialog-titlebar {
    border-bottom-color: #4B4957;
}

/* ---- Index status links: "View logs" purple, "Refresh" blue ---- */

.index-link.rz-button,
.index-link.rz-button .rz-button-text,
.index-link.rz-button .rzi {
    text-transform: none;
}

.index-link--logs.rz-button,
.index-link--logs.rz-button .rz-button-text,
.index-link--logs.rz-button .rzi {
    color: #8042FE !important;
}

.index-link--refresh.rz-button,
.index-link--refresh.rz-button .rz-button-text,
.index-link--refresh.rz-button .rzi {
    color: #7196E0 !important;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-link--logs.rz-button,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-link--logs.rz-button .rz-button-text,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-link--logs.rz-button .rzi {
    color: #B79BFF !important;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-link--refresh.rz-button,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-link--refresh.rz-button .rz-button-text,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .index-link--refresh.rz-button .rzi {
    color: #9DB8F0 !important;
}

/* ---- Layout guide dialog ---- */

/* Title and body share the same side padding. */
.layout-guide-dialog .rz-dialog-titlebar {
    padding-inline: 1.5rem;
}

.layout-guide-dialog .rz-dialog-content {
    padding-inline: 0;
}

.layout-guide-body {
    margin: 0 1.5rem 1.5rem;
}

/* Edge to edge: cancels the side margin of .layout-guide-body. */
.dialog-divider--full {
    width: calc(100% + 3rem);
    margin-inline: -1.5rem;
}

.dialog-divider {
    width: 100%;
    margin: 0;
    border: none;
    border-top: 1px solid #E5E7EB;
}

.guide-card {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background-color: #F9FAFE;
    padding: 0.75rem 1rem;
}

.guide-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.guide-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.guide-family {
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 0;
}

.guide-card-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.guide-card-summary {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--rz-text-secondary-color);
}

.guide-card-question {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background-color: #FEF3C7;
    color: #92400E;
    font-size: 0.85rem;
    line-height: 1.45;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .dialog-divider,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .guide-card {
    border-color: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .guide-card {
    background-color: rgba(255, 255, 255, 0.04);
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .guide-card-question {
    background-color: #4D3B16;
    color: #FCD34D;
}

/* ---- Topic page: files created by agents ---- */

.skill-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #E5E7EB;
}

.skill-file-row:last-child {
    border-bottom: none;
}

/* Fixed width so Assign / Share link start at the same x in every row. */
.skill-file-info {
    display: flex;
    flex-direction: column;
    flex: 0 1 22rem;
    width: 22rem;
    min-width: 0;
}

.skill-file-actions--end {
    margin-left: auto;
}

.skill-file-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.skill-file-meta {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.skill-file-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.skill-file-action.rz-button {
    text-transform: none;
}

.skill-files-empty {
    padding: 1rem 0;
    color: var(--rz-text-secondary-color);
}

/* Popovers of a file row ("Assign to agent", "Share link") */
.skill-popover {
    width: 300px;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.skill-popover-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.skill-popover-title {
    font-weight: 600;
}

.skill-popover-submit {
    align-self: flex-end;
}

.skill-popover-label {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.skill-agent-list {
    max-height: 190px;
    overflow-y: auto;
    padding: 0.25rem 0.1rem;
}

.skill-popover-search.rz-textbox {
    background-color: #F4F6F9;
    border-color: transparent;
    border-radius: 8px;
    font-size: 0.85rem;
}

/* Read-only link and "Copy" inside one rounded gray box. */
.skill-link-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--rz-text-color) 6%, transparent);
}

.skill-link-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.skill-link-copy {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-primary);
}

.skill-link-copy:disabled {
    opacity: 0.4;
    cursor: default;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .skill-file-row {
    border-bottom-color: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .skill-popover {
    background-color: #2B2A33;
    border-color: #4B4957;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .skill-popover-search.rz-textbox {
    background-color: rgba(255, 255, 255, 0.06);
}

/* ---- Topic page: profile and agent lists ---- */

.entity-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.entity-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.35rem;
    border-radius: 8px;
    cursor: pointer;
}

.entity-row:hover {
    background-color: color-mix(in srgb, var(--rz-text-color) 7%, transparent);
}

.entity-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.entity-chevron {
    color: var(--rz-text-secondary-color);
    font-size: 1.1rem;
}

/* Small bar before the name: teal when active, gray when not. */
.entity-pill {
    flex-shrink: 0;
    width: 24px;
    height: 10px;
    border-radius: 999px;
}

.entity-pill--active {
    background-color: #8EDBCD;
}

.entity-pill--inactive {
    background-color: #C3C8D1;
}

/* Agent kinds: gray Base, green Smart, orange Video. */
.entity-pill--base {
    background-color: #C3C8D1;
}

.entity-pill--smart {
    background-color: #8EDBCD;
}

.entity-pill--video {
    background-color: #FFC47D;
}

.entity-pill--faded {
    opacity: 0.65;
}

.entity-row .vertical-separator--thin {
    flex-shrink: 0;
    border-style: solid;
    margin: 0 0.1rem;
}

.check-updates-note {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
}

.all-entities-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.all-entities-subtitle {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.all-entities-search.rz-textbox {
    background-color: #F4F6F9;
    border-color: transparent;
    border-radius: 8px;
}

.all-entities-list {
    max-height: 340px;
    overflow-y: auto;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .entity-pill--active {
    background-color: #2F8576;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .entity-pill--inactive,
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .entity-pill--base {
    background-color: #6E6C85;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .entity-pill--smart {
    background-color: #2F8576;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .entity-pill--video {
    background-color: #B3711F;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .all-entities-search.rz-textbox {
    background-color: rgba(255, 255, 255, 0.06);
}

/* ---- Dialogs and popovers are rendered outside the themed layout, so they have no
   ".rz-material-dark" ancestor: the dark rules above also match through
   "body:has(.rz-layout.rz-material-dark)". These derive from the theme text color. ---- */

.detail-dialog .file-search .file-search-input.rz-textbox,
.detail-dialog .file-search .rz-textbox.file-search-input:not(.rz-state-disabled),
.skill-popover .file-search .file-search-input.rz-textbox,
.skill-popover .file-search .rz-textbox.file-search-input:not(.rz-state-disabled) {
    background-color: color-mix(in srgb, var(--rz-text-color) 7%, transparent) !important;
    color: var(--rz-text-color);
}

.detail-dialog .rz-dialog-titlebar,
.detail-dialog--subtitle .all-entities-subtitle {
    border-bottom-color: color-mix(in srgb, var(--rz-text-color) 14%, transparent);
}

.detail-dialog--subtitle .rz-dialog-titlebar {
    border-bottom: none;
}

/* Dark grids (also inside dialogs): transparent rows, faint zebra, no white borders. */
:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .file-grid .rz-grid-table tbody tr > td {
    background-color: transparent;
}

:is(.rz-material-dark, body:has(.rz-layout.rz-material-dark)) .file-grid .rz-grid-table tbody tr.rz-datatable-odd > td {
    background-color: rgba(255, 255, 255, 0.03);
}