/*
 * Brand logo is 4.5rem (see AgentPanelProvider::brandLogoHeight),
 * while Filament layout math assumes a 4rem topbar. That mismatch
 * makes the sticky sidebar slightly taller than the viewport and
 * causes a small page scrollbar even when content fits.
 */
:root {
    --fi-topbar-height: 4.5rem;
}

.fi-body-has-topbar .fi-sidebar {
    @media (min-width: 1024px) {
        top: var(--fi-topbar-height);
        height: calc(100dvh - var(--fi-topbar-height));
    }
}

.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-main-ctn,
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-main-ctn,
.fi-body.fi-body-has-top-navigation .fi-main-ctn,
.fi-body:not(.fi-body-has-navigation) .fi-main-ctn {
    min-height: calc(100dvh - var(--fi-topbar-height));
}

.fi-fo-field-label-content a.legal-doc-link {
    color: var(--primary-600, rgb(37, 99, 235));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fi-fo-field-label-content a.legal-doc-link:hover {
    color: var(--primary-700, rgb(29, 78, 216));
}

.dark .fi-fo-field-label-content a.legal-doc-link {
    color: var(--primary-400, rgb(96, 165, 250));
}

.dark .fi-fo-field-label-content a.legal-doc-link:hover {
    color: var(--primary-300, rgb(147, 197, 253));
}

.fi-user-credits {
    display: inline-flex;
    align-items: center;
    margin-inline-end: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(37, 99, 235, 0.1);
    color: rgb(37, 99, 235);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-user-credits:hover {
    background: rgba(37, 99, 235, 0.18);
    color: rgb(29, 78, 216);
}

.dark .fi-user-credits {
    background: rgba(96, 165, 250, 0.15);
    color: rgb(147, 197, 253);
}

.dark .fi-user-credits:hover {
    background: rgba(96, 165, 250, 0.25);
    color: rgb(191, 219, 254);
}

.fi-fo-slider:not(.fi-fo-slider-vertical) .noUi-horizontal {
    height: 6px;
}

.fi-fo-slider .noUi-handle {
    width: 18px !important;
    height: 18px !important;
    border-radius: 9999px !important;
    border: 2px solid rgb(37 99 235) !important;
    background: rgb(255 255 255) !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08) !important;
}

.fi-fo-slider .noUi-handle::before,
.fi-fo-slider .noUi-handle::after {
    display: none !important;
}

.fi-fo-slider .noUi-connect {
    background: rgb(37 99 235) !important;
}

.fi-fo-slider .noUi-connects {
    border-radius: 9999px;
    background: rgb(229 231 235);
}

.dark .fi-fo-slider .noUi-connects {
    background: rgb(55 65 81);
}

.dark .fi-fo-slider .noUi-handle {
    background: rgb(31 41 55) !important;
    border-color: rgb(96 165 250) !important;
}

img.fi-sc-image {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.avito-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: rgb(3 7 18);
}

.dark .avito-logo {
    color: rgb(249 250 251);
}

.avito-logo svg {
    height: 24px;
    width: auto;
    max-width: 92px;
}

.dialogs-switch {
    position: relative;
    display: inline-flex;
    height: 26px;
    width: 48px;
    border-radius: 9999px;
    background: rgb(148 163 184);
    transition: all 0.2s ease;
    align-items: center;
}

.dialogs-switch:hover {
    opacity: 0.9;
}

.dialogs-switch-active {
    background: rgb(37 99 235);
}

.dialogs-switch-thumb {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 9999px;
    background: rgb(255 255 255);
    transform: translateX(3px);
    transition: transform 0.2s ease;
}

.dialogs-switch-active .dialogs-switch-thumb {
    transform: translateX(25px);
}

.dialogs-chat-card {
    border-width: 1px;
}

.dialogs-chat-card-active {
    box-shadow: 0 0 0 2px rgb(37 99 235 / 0.35);
}

.dark .dialogs-chat-card-active {
    box-shadow: 0 0 0 2px rgb(96 165 250 / 0.45);
}

.dialogs-thread-layout {
    height: 72vh;
}

.dialogs-thread-panel {
    min-height: 0;
}

.dialogs-thread-messages {
    min-height: 0;
}

.dialogs-operator-textarea {
    display: block;
    width: 100%;
}

.fi-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in oklab, var(--gray-950, rgb(3 7 18)) 50%, transparent);
}

.dark .fi-settings-overlay {
    background: color-mix(in oklab, var(--gray-950, rgb(3 7 18)) 75%, transparent);
}

.fi-settings-overlay--action-open {
    background: transparent;
    pointer-events: none;
}

.fi-settings-overlay--action-open .fi-settings-modal {
    pointer-events: none;
}

.fi-settings-action-modals .fi-modal.fi-modal-open > .fi-modal-close-overlay,
.fi-settings-action-modals .fi-modal.fi-modal-open > .fi-modal-window-ctn {
    z-index: 50;
}

.fi-settings-modal {
    display: flex;
    width: min(960px, 100%);
    height: min(720px, calc(100vh - 3rem));
    min-height: min(720px, calc(100vh - 3rem));
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--color-white, #fff);
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
    outline: 1px solid color-mix(in oklab, var(--gray-950, rgb(3 7 18)) 5%, transparent);
}

.dark .fi-settings-modal {
    background: var(--gray-900, rgb(17 24 39));
    outline-color: color-mix(in oklab, white 10%, transparent);
}

.fi-settings-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--gray-200, rgb(229 231 235));
    background: var(--gray-50, rgb(249 250 251));
}

.dark .fi-settings-sidebar {
    border-right-color: color-mix(in oklab, white 10%, transparent);
    background: color-mix(in oklab, white 5%, transparent);
}

.fi-settings-sidebar__title {
    margin: 0 0 1rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500, rgb(107 114 128));
}

.dark .fi-settings-sidebar__title {
    color: var(--gray-400, rgb(156 163 175));
}

.fi-settings-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fi-settings-tab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--gray-500, rgb(107 114 128));
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-settings-tab:hover {
    background: var(--gray-50, rgb(249 250 251));
    color: var(--gray-700, rgb(55 65 81));
}

.dark .fi-settings-tab {
    color: var(--gray-400, rgb(156 163 175));
}

.dark .fi-settings-tab:hover {
    background: color-mix(in oklab, white 5%, transparent);
    color: var(--gray-200, rgb(229 231 235));
}

.fi-settings-tab__icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--gray-400, rgb(156 163 175));
}

.fi-settings-tab--active {
    background: var(--gray-50, rgb(249 250 251));
    color: var(--primary-700, rgb(29 78 216));
}

.fi-settings-tab--active .fi-settings-tab__icon {
    color: var(--primary-700, rgb(29 78 216));
}

.dark .fi-settings-tab--active {
    background: color-mix(in oklab, white 5%, transparent);
    color: var(--primary-400, rgb(96 165 250));
}

.dark .fi-settings-tab--active .fi-settings-tab__icon {
    color: var(--primary-400, rgb(96 165 250));
}

.fi-settings-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.fi-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    padding: 1.5rem 1.5rem 1rem;
}

.fi-settings-header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-950, rgb(3 7 18));
}

.dark .fi-settings-header__title {
    color: var(--color-white, #fff);
}

.fi-settings-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.fi-settings-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 1.5rem 1.5rem;
}

.fi-settings-body--loading {
    opacity: 0.6;
}

.fi-settings-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--color-white, #fff) 65%, transparent);
}

.dark .fi-settings-loader {
    background: color-mix(in oklab, var(--gray-900, rgb(17 24 39)) 65%, transparent);
}

.fi-settings-empty {
    margin: 0;
    color: var(--gray-500, rgb(107 114 128));
    font-size: 0.875rem;
}

.dark .fi-settings-empty {
    color: var(--gray-400, rgb(156 163 175));
}

.fi-org-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fi-org-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--gray-200, rgb(229 231 235));
    border-radius: 0.75rem;
    background: var(--color-white, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .fi-org-card {
    border-color: color-mix(in oklab, white 10%, transparent);
    background: var(--gray-900, rgb(17 24 39));
}

.fi-org-card:hover {
    border-color: var(--gray-300, rgb(209 213 219));
}

.dark .fi-org-card:hover {
    border-color: color-mix(in oklab, white 20%, transparent);
}

.fi-org-card--active {
    border-color: var(--primary-600, rgb(37 99 235));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary-600, rgb(37 99 235)) 25%, transparent);
}

.fi-org-card__name {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-950, rgb(3 7 18));
}

.dark .fi-org-card__name {
    color: var(--color-white, #fff);
}

.fi-org-card__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gray-500, rgb(107 114 128));
}

.dark .fi-org-card__meta {
    color: var(--gray-400, rgb(156 163 175));
}

.fi-org-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-org-card__menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--gray-500, rgb(107 114 128));
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-org-card__menu-trigger:hover {
    background: var(--gray-100, rgb(243 244 246));
    color: var(--gray-700, rgb(55 65 81));
}

.dark .fi-org-card__menu-trigger:hover {
    background: color-mix(in oklab, white 10%, transparent);
    color: var(--gray-300, rgb(209 213 219));
}

.fi-members-table-wrap {
    overflow-x: auto;
}

.fi-members-table {
    width: 100%;
    border-collapse: collapse;
}

.fi-members-table th,
.fi-members-table td {
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid var(--gray-100, rgb(243 244 246));
    text-align: left;
    vertical-align: middle;
}

.dark .fi-members-table th,
.dark .fi-members-table td {
    border-bottom-color: color-mix(in oklab, white 10%, transparent);
}

.fi-members-table th {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500, rgb(107 114 128));
}

.dark .fi-members-table th {
    color: var(--gray-400, rgb(156 163 175));
}

.fi-members-table__actions-col {
    width: 3rem;
    text-align: right;
}

.fi-member-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-950, rgb(3 7 18));
}

.dark .fi-member-name {
    color: var(--color-white, #fff);
}

.fi-member-email {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--gray-500, rgb(107 114 128));
}

.dark .fi-member-email {
    color: var(--gray-400, rgb(156 163 175));
}

.fi-members-role-select {
    min-width: 8rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--gray-200, rgb(229 231 235));
    border-radius: 0.5rem;
    background: var(--color-white, #fff);
    color: var(--gray-950, rgb(3 7 18));
    font-size: 0.875rem;
}

.dark .fi-members-role-select {
    border-color: color-mix(in oklab, white 10%, transparent);
    background: var(--gray-900, rgb(17 24 39));
    color: var(--color-white, #fff);
}

.fi-members-role-label {
    font-size: 0.875rem;
    color: var(--gray-700, rgb(55 65 81));
}

.dark .fi-members-role-label {
    color: var(--gray-300, rgb(209 213 219));
}

.fi-members-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--gray-500, rgb(107 114 128));
}

.dark .fi-members-pagination {
    color: var(--gray-400, rgb(156 163 175));
}

.fi-members-pagination__per-page {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-members-pagination__select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--gray-200, rgb(229 231 235));
    border-radius: 0.375rem;
    background: var(--color-white, #fff);
    color: var(--gray-950, rgb(3 7 18));
}

.dark .fi-members-pagination__select {
    border-color: color-mix(in oklab, white 10%, transparent);
    background: var(--gray-900, rgb(17 24 39));
    color: var(--color-white, #fff);
}

.fi-members-pagination__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.fi-members-pagination__btn {
    border: none;
    background: transparent;
    color: var(--gray-500, rgb(107 114 128));
    cursor: pointer;
}

.dark .fi-members-pagination__btn {
    color: var(--gray-400, rgb(156 163 175));
}

.fi-members-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .fi-settings-modal {
        flex-direction: column;
        height: calc(100vh - 2rem);
        min-height: calc(100vh - 2rem);
    }

    .fi-settings-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--gray-200, rgb(229 231 235));
    }

    .dark .fi-settings-sidebar {
        border-bottom-color: color-mix(in oklab, white 10%, transparent);
    }

    .fi-settings-sidebar__nav {
        flex-direction: row;
    }

    .fi-settings-tab {
        flex: 1;
        justify-content: center;
    }

    .fi-settings-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .fi-org-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .fi-members-table thead {
        display: none;
    }

    .fi-members-table tr {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--gray-100, rgb(243 244 246));
    }

    .fi-members-table td {
        display: block;
        border: none;
        padding: 0.25rem 0;
    }

    .fi-members-table__actions-col {
        width: auto;
        text-align: left;
    }
}