.tm-member-modal {
    width: 100%;
    height: auto;
    margin-top: 0;
    background: transparent;
    overflow: hidden;
}

/* если хочешь сохранить ограничение по высоте, но не "модалку" */
.tm-member-grid {
    padding: 0 20px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 368px));
    gap: 16px;
    align-content: start;

    overflow: auto;
    height: auto;
    max-height: calc(100vh - 260px); /* подстрой под свой layout */
}

.tm-member-modal--inline {
    width: 100%;
    height: 100vh;
    margin-top: 0;
    background: transparent;
    overflow: hidden;
}

.tm-member-modal--inline .tm-member-grid {
    height: auto;
    max-height: calc(100vh - 260px);
    overflow: auto;
}


.tm-member-topbar {
    position: relative;
    height: 40px;
    background: var(--bg-quattuordenenary); /* #22418C */
    border-bottom: 1px solid var(--accent-primary-hover);
}

.tm-member-title {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
    background: var(--text-fifthly);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tm-member-close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}

.tm-member-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 10px 12px 0;
}

.tm-member-tab {
    height: 30px;
    padding: 4px 12px;
    border: none;
    background: transparent;
    border-bottom: 1px solid rgba(47, 190, 210, 0.4);
    border-radius: 4px 4px 0 0;
    font-size: 16px;
    line-height: 140%;
    color: rgba(47, 190, 210, 0.7);
    cursor: pointer;
}

.tm-member-tab.is-active {
    border-bottom-color: var(--accent-primary-hover);
    color: var(--accent-primary-hover);
}

.tm-member-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    flex-wrap: wrap;
}

.tm-member-select {
    position: relative;
    height: 40px;
    border: 1px solid var(--accent-primary-hover);
    border-radius: var(--radius-md);
    background: var(--bg-octonary1);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25); /* как в Figma */
    color: var(--text-field);
    display: flex;
    align-items: center;
    padding: 0; /* теперь padding будет у select */
    flex: 1 1 360px;
    min-width: 220px;
    overflow: hidden;
}

/* сам select — полностью под контроль */
.tm-member-select select {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 16px;
    line-height: 100%;
    padding: 0 44px 0 16px; /* left=15 по Figma, справа место под стрелку */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* placeholder/disabled */
.tm-member-select select:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* стрелка (кастом) */
.tm-member-select::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid var(--accent-primary-hover);
    border-bottom: 2px solid var(--accent-primary-hover);
    pointer-events: none;
}

/* маленький селект */
.tm-member-select--small {
    flex: 0 0 200px;
    min-width: 160px;
}

.tm-client-card__body1 {
    bottom: var(--bg-member-card-body);
}

.tm-member-add {
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--accent-primary-hover);
    background: var(--accent-primary-hover);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}


.tm-client-card {
    height: 172px;
    border-radius: 10px;
    background: var(--bg-invite-modal);
    border: 1px solid var(--accent-primary-hover);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.tm-client-card--new {
    border-color: rgba(47, 190, 210, 0.5);
    background: none;
}

.tm-client-card__top {
    height: 40px;
    background: var(--bg-member-card-header);
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left grows, center tight, right grows */
    align-items: center;
    column-gap: 12px;
}

.tm-client-card__name {
    justify-self: start;
    max-width: 100%;
    white-space: nowrap;
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* center */
.tm-client-card__topCenter {
    justify-self: center;
    position: relative; /* чтобы не было сюрпризов при абсолютах внутри */
}

/* right */
.tm-client-card__x {
    justify-self: end;
    padding-right: 10px;
}


/* состояние фокуса */
.tm-client-card__modeSelect:focus-within {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}

/* ===== Permission dropdown (Figma 1:1) ===== */

/* контейнер в центре top */
.tm-client-card__modeSelect {
    display: inline-flex;
    align-items: center;
}

/* wrapper */
.tm-perm-dd {
    position: relative;
}

/* Trigger (Frame 96) */
.tm-perm-dd__trigger {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;

    height: 24px;
    padding: 2px 10px;

    background: var(--tm-perm-bg);
    border: 1px solid var(--tm-perm-border);
    border-radius: 5px;

    cursor: pointer;
}

/* text */
.tm-perm-dd__label {
    display: flex;
    align-items: center;

    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: var(--tm-perm-text);

    white-space: nowrap;
}


.tm-perm-dd__chevron {
    position: relative;
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    display: block;

    transition: transform 160ms ease;
    transform-origin: 50% 50%;
}

.tm-perm-dd__chevron::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

    /* небольшая коррекция по вертикали как в tm-dd */
    transform: translate(-50%, -60%) rotate(45deg);

    border-right: 2px solid var(--tm-perm-border);
    border-bottom: 2px solid var(--tm-perm-border);
}


/* disabled */
.tm-perm-dd__trigger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dropdown menu (Frame 142 overall) */
.tm-perm-dd__menu {
    box-sizing: border-box;
    position: fixed;
    z-index: 9999;

    height: 48px;

    border: 1px solid var(--tm-perm-border);
    border-radius: var(--tm-perm-menu-radius);

    background: var(--tm-perm-menu-bg);

    box-shadow: var(--tm-perm-shadow);
    filter: none;

    overflow: hidden;
}


.tm-perm-dd__menu button,
.tm-perm-dd__item {
    border: 1px solid var(--tm-perm-border);
    outline: 0 !important;
    box-shadow: none !important;
    background-clip: padding-box;
}

/* item rows (Frame 137/138) */
.tm-perm-dd__item {
    box-sizing: border-box;

    width: 100%;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--tm-perm-menu-bg);
    color: var(--tm-perm-menu-text);
    border-top: 1px solid var(--tm-perm-border);

    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;

    cursor: pointer;
    padding: 0;
}

/* первая строка: без top-border */
.tm-perm-dd__item:first-child {
    border-top: 0;
}

/* selected state */
.tm-perm-dd__item.is-selected {
    background: var(--tm-perm-menu-bg);
    font-weight: 500;
}

/* =========================
   Custom Dropdown (tm-dd)
   Uses base.css variables: --tm-perm-*
   ========================= */

.tm-dd {
    position: relative;
    display: inline-flex;
    width: 100%;
}

/* trigger */
.tm-dd__trigger {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    border: 0;
    align-items: center;
    justify-content: space-between;

    background: var(--tm-perm-bg);
    border-radius: var(--tm-perm-radius-lg);

    box-shadow: var(--tm-perm-shadow);

    cursor: pointer;
    outline: none;
}

.tm-dd__trigger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* label */
.tm-dd__label {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;
    line-height: 100%;
    color: var(--tm-perm-menu-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* chevron */
.tm-dd__chev {
    position: relative;
    flex: 0 0 auto;
}

.tm-dd__chev::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -60%) rotate(45deg);
    border-right: 1.6px solid var(--tm-perm-border);
    border-bottom: 1.6px solid var(--tm-perm-border);
}

/* menu */
.tm-dd__menu {
    box-sizing: border-box;
    position: fixed;
    z-index: 9999;

    border: 1px solid var(--tm-perm-border);
    border-radius: var(--tm-perm-menu-radius);

    background: var(--tm-perm-menu-bg);
    box-shadow: var(--tm-perm-shadow);

    overflow: hidden;
}

.tm-dd__chev {
    transition: transform 160ms ease;
    transform-origin: 50% 50%;
}

.tm-dd.is-open .tm-dd__chev {
    transform: rotate(180deg);
}

/* rotate chevron when permission dropdown is open */
.tm-perm-dd__chevron {
    transition: transform 160ms ease;
    transform-origin: 50% 50%;
}

.tm-perm-dd.is-open .tm-perm-dd__chevron {
    transform: rotate(180deg);
}


.tm-dd__chev::before {
    transition: transform 160ms ease;
}


.tm-dd__menu button {
    border-top: 1px solid var(--tm-perm-border);
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

/* item */
.tm-dd__item {
    width: 100%;
    display: flex;
    align-items: center;

    background: var(--tm-perm-menu-bg);
    color: var(--tm-perm-menu-text);

    border: 0;
    border-top: 1px solid var(--tm-perm-border);

    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;
    line-height: 100%;

    cursor: pointer;
}

.tm-dd__item:first-child {
    border-top: 0;
}

.tm-dd__item:hover,
.tm-dd__item.is-active {
    background: var(--tm-perm-hover-bg);
}

/* ---------- sizes ---------- */

/* lg: top controls (524x40, font 16) */
.tm-dd__trigger--lg {
    height: 40px;
    padding: 12px 12px 12px 16px;
}

.tm-dd__label--lg {
    font-size: 16px;
    line-height: 20px;
    padding-bottom: 1px;
}

.tm-dd__chev--lg {
    width: 16px;
    height: 16px;
}

.tm-dd__item--lg {
    height: 40px;
    padding: 12px 12px 12px 16px;
    font-size: 16px;
}

/* sm: permission in card (91x24, font 14, centered) */
.tm-dd__trigger--sm {
    height: 24px;
    padding: 2px 10px;
    border-radius: var(--tm-perm-radius-sm);
    box-shadow: none; /* как в Figma у маленького */
}

.tm-dd__label--sm {
    font-size: 14px;
    color: var(--tm-perm-text);
}

.tm-dd__chev--sm {
    width: 16px;
    height: 16px;
}

.tm-dd__item--sm {
    height: 24px;
    justify-content: center;
    padding: 0;
    font-size: 14px;
}

.tm-client-card__name {
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
    color: var(--text-primary);
}

.tm-client-card__mode {
    margin-left: auto;
    font-size: 14px;
    line-height: 140%;
    color: var(--text-primary);
    border: 1px solid var(--accent-primary-hover);
    border-radius: 5px;
    padding: 2px 10px;
    background: var(--bg-octonary);
}

.tm-client-card__x {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.tm-client-card__meta {
    padding: 10px 10px 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    color: var(--text-primary);
}

.tm-client-card__tags {
    padding: 10px;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.tm-client-card__tags span {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 10px;
    border-radius: 5px;
    background: var(--bg-input-surface); /* #19284B */
    border: 1px solid var(--accent-primary-hover);
    box-shadow: var(--shadow-sm);
    font-size: 13px;
    line-height: 120%;
    color: var(--text-primary);
}

.tm-client-card__dates {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 10px;
    line-height: 120%;
    color: var(--bg-denary, #9CA3AF);
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.tm-member-select.tm-member-select--dropdown::after {
    content: none !important;
}

.tm-client-card__header {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-add-new-client-header);
    font-weight: 600;
    font-size: 20px;
    color: var(--text-primary);
}

.tm-client-card__body {
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 140%;
    color: var(--text-primary);
    text-align: center;
    padding: 0 14px;
    background: var(--bg-add-new-client-body);
}

.tm-frame.tm-frame--profile {
    padding: 0;
}


.tm-client-card__row {
    display: flex;
    gap: 18px;
    padding: 14px 10px 0;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 140%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tm-client-card__row strong {
    font-weight: 550;
}

/* Dropdown container (Frame 153 vibe) */
.tm-client-card__perm {
    margin-left: auto;
    position: relative;
    height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--accent-primary-hover);
    background: var(--bg-octonary);
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .25);
    padding: 0 28px 0 10px;
}

.tm-client-card__permSelect {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    color: #B3B3B3;
    font-size: 16px;
    line-height: 100%;
    padding: 0;
    cursor: pointer;
}

.tm-client-card__permChevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #B3B3B3;
    pointer-events: none;
}

/* =========================================
   User Chats Tab (Figma Exact Match)
   ========================================= */

.tm-chats {
    position: relative;
    width: 100%;
    height: 100%; /* Занимает всю высоту модалки */

    display: flex;
    flex-direction: column;

    /* Frame 191: Фон контейнера */
    border-radius: 0 0 8px 8px; /* Скругление снизу у контейнера */
    padding: 20px; /* Отступ внутри контейнера как на скрине */
    box-sizing: border-box;
    overflow: hidden;
}

/* --- Search Controls (Frame 133) --- */

.tm-chats__controls {
    flex: 0 0 auto; /* Не сжиматься */
    display: flex;
    gap: 15px;
    width: 100%;
    margin-bottom: 15px; /* Отступ до таблицы */
}

.tm-chats__controls .search-input {
    flex: 1;
    height: 40px;

    background: var(--bg-chat-input);
    border: 1px solid var(--border-chat-table);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 8px;

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--text-field);

    padding: 0 16px 0 44px; /* Место под иконку */
    outline: none;

    /* Иконка лупы svg encoded */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232FBED2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

.tm-chats__controls .search-input::placeholder {
    color: var(--text-field);
}

.tm-chats__search-btn {
    height: 40px;
    padding: 0 24px;
    background: var(--accent-primary-hover);
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
}

/* --- Table List (Container) --- */

.search-results-member {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Скролл только внутри списка */
    gap: 0;
    padding-bottom: 100px;
}

/* --- Rows Layout --- */

.chat-search-item-member {
    display: grid;
    background: var(--bg-chat-list-container);
    /* Пропорции колонок как в фигме: Имя растягивается, Дата фикс, Удалить фикс */
    grid-template-columns: 1fr 300px;
    width: 100%;
    min-width: 600px; /* Минимальная ширина чтобы не ломалось на мобилке */
}

/* Ячейки (общие стили) */
.chat-search-item-member > div {
    height: 42px; /* Фиксированная высота строки */
    display: flex;
    align-items: center;
    box-sizing: border-box;

    font-family: 'Inter', sans-serif;
    font-size: 16px;

    /* Цвет границ */
    border-color: var(--border-chat-table);
    border-style: solid;
}

/* --- HEADER ROW (Базовый) --- */
.chat-search-item-base {
    position: relative;
    top: 0;
    z-index: 2;
}

.chat-search-item-base > div {
    background: var(--bg-chat-header);
    color: var(--text-chat-header);
    font-weight: 600;
}

/* Границы Хедера (Top, Bottom, Left/Right) */
/* Name */
.chat-search-item-base .chat-title-member {
    padding-left: 16px;
    border-width: 2px 0 2px 2px; /* Top, Right=0, Bottom, Left */
    border-radius: 5px 0 0 0; /* Скругление Top-Left */
}

/* Date */
.chat-search-item-base .chat-date-member {
    justify-content: center;
    border-width: 2px 2px 2px 2px; /* Со всех сторон */
    border-radius: 0 5px 0 0;
}



/* Delete */
.chat-search-item-base .chat-delete {
    justify-content: center;
    border-width: 2px 2px 2px 0; /* Left=0 */
    border-radius: 0 5px 0 0; /* Скругление Top-Right */
}

/* --- BODY ROWS (Обычные строки) --- */

/* Цвет текста в строках */
.chat-search-item-member:not(.chat-search-item-base) > div {
    color: var(--text-chat-body);
    font-weight: 400;
    background: transparent;
}

/* ЛОГИКА ГРАНИЦ ДЛЯ ТЕЛА:
   Убираем верхний бордер (border-top: 0), так как он уже есть у элемента выше (bottom).
   Это создает эффект "схлопнутых" границ.
*/

/* Name Cell */
.chat-search-item-member:not(.chat-search-item-base) .chat-title-member {
    padding-left: 16px;
    border-width: 0 0 2px 2px; /* Top=0, Right=0, Bottom=2, Left=2 */

    display: block; /* Важно: переключаем с flex на block */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    height: 42px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Date Cell */
.chat-search-item-member:not(.chat-search-item-base) .chat-date-member {
    justify-content: center;
    border-width: 0 2px 2px 2px; /* Top=0, Right=2, Bottom=2, Left=2 */
}

/* Delete Cell */
.chat-search-item-member:not(.chat-search-item-base) .chat-delete {
    justify-content: center;
    border-width: 0 2px 2px 0; /* Top=0, Right=2, Bottom=2, Left=0 */
    cursor: pointer;
    color: inherit;
}

/* --- LAST ROW CORNERS (Закругления снизу) --- */

.chat-search-item-member:not(.chat-search-item-base):last-child .chat-title-member {
    border-radius: 0 0 0 5px; /* Bottom-Left */
}


.chat-search-item-member:not(.chat-search-item-base):last-child .chat-date-member {
    border-radius: 0 0 5px 0; /* Bottom-Left */
}



/* --- Scrollbar styling (Optional, for webkit) --- */
.search-results-member::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.search-results-member::-webkit-scrollbar-thumb {
    background: var(--accent-primary-hover);
    border-radius: 3px;
}

.search-results-member::-webkit-scrollbar-track {
    background: transparent;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    /* На мобилке даем скроллить таблицу горизонтально, но не ломаем ячейки */
    .chat-search-item-member {
        grid-template-columns: minmax(0, 1fr) 110px;
        min-width: 0;
    }
}

/* Responsive */
@media (max-width: 640px) {
    .tm-client-card__row {
        font-size: 14px;
        gap: 10px;
    }

    .tm-client-card__perm {
        height: 32px;
        border-radius: var(--radius-md);
    }

    .tm-client-card__permSelect {
        font-size: 14px;
    }
}


/* Small screens: modal fills viewport nicely */
@media (max-width: 640px) {
    .tm-member-overlay {
        padding: 12px;
    }

    .tm-frame.tm-frame--profile {
        max-width: none;
        width: 100%;
        margin: 0;
    }

    .tm-member-modal {
        margin-top: 0;
    }

    .tm-member-grid {
        grid-template-columns: 1fr;
    }

    .tm-member-controls {
        gap: 10px;
    }

    .tm-member-select,
    .tm-member-select--small {
        flex: 1 1 100%;
        min-width: 0;
    }
}