/* Экран согласия для браузерного расширения и его карточка на странице интеграций.

   Экран согласия открывается в окне chrome.identity.launchWebAuthFlow — это примерно
   пятьсот точек в ширину и без сайдбара. Поэтому у него своя, узкая раскладка, а не
   .main-container: та рассчитана на страницу панели. Токены и составные части те же. */

.ext-consent {
    display: flex;
    flex-direction: column;
    gap: var(--tearinbot-space-5);
    max-width: 28rem;
    margin: 0 auto;
    padding: var(--tearinbot-space-6) var(--tearinbot-space-5);
}

.ext-consent-header {
    display: flex;
    align-items: center;
    gap: var(--tearinbot-space-3);
}

.ext-consent-logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--tearinbot-radii-md);
}

.ext-consent-title {
    margin: 0;
    font-size: var(--tearinbot-fontSizes-xl);
    font-weight: var(--tearinbot-fontWeights-bold);
    color: var(--bs-font-color);
}

.ext-consent-channel {
    display: flex;
    align-items: center;
    gap: var(--tearinbot-space-3);
    padding: var(--tearinbot-space-4);
    border: 1px solid var(--container-border);
    border-radius: var(--tearinbot-radii-lg);
    background-color: var(--container-bg);
}

.ext-consent-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--tearinbot-radii-full);
}

.ext-consent-channel-name {
    margin: 0;
    font-weight: var(--tearinbot-fontWeights-bold);
    color: var(--bs-font-color);
}

.ext-consent-channel-hint,
.ext-consent-option-hint {
    margin: 0;
    font-size: var(--tearinbot-fontSizes-sm);
    color: var(--text-muted);
}

/* Список прав — маркерами, а не сплошным абзацем: их всего два, и каждое должно читаться
   отдельным обещанием, а не растворяться в тексте. */
.ext-consent-grants {
    display: flex;
    flex-direction: column;
    gap: var(--tearinbot-space-2);
    margin: 0;
    padding-left: var(--tearinbot-space-5);
    font-size: var(--tearinbot-fontSizes-sm);
    color: var(--bs-font-color);
}

/* Согласие делиться треком стоит отдельной панелью с рамкой, а не строкой в списке прав:
   остальное расширение получает вместе с подключением, а это — только если его включить. */
.ext-consent-option {
    display: flex;
    align-items: flex-start;
    gap: var(--tearinbot-space-3);
    margin: 0;
    padding: var(--tearinbot-space-4);
    border: 1px solid var(--container-border);
    border-radius: var(--tearinbot-radii-lg);
    background-color: var(--container-bg);
    cursor: pointer;
}

.ext-consent-option .switch {
    flex: 0 0 auto;
    margin-top: 0.125rem;
}

.ext-consent-option-text {
    display: flex;
    flex-direction: column;
    gap: var(--tearinbot-space-1);
}

.ext-consent-option-title {
    font-weight: var(--tearinbot-fontWeights-bold);
    font-size: var(--tearinbot-fontSizes-sm);
    color: var(--bs-font-color);
}

.ext-consent-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--tearinbot-space-2);
}

.ext-consent-problem {
    margin: 0;
    padding: var(--tearinbot-space-4);
    border: 1px solid var(--container-border);
    border-radius: var(--tearinbot-radii-lg);
    background-color: var(--container-bg);
    color: var(--form-error-color);
    font-size: var(--tearinbot-fontSizes-sm);
}

/* ————— Карточка и список браузеров на странице интеграций ————— */

.integration-icon--extension {
    color: var(--tearinbot-colors-primary-400);
}

/* Список подключённых браузеров живёт внутри .integration-details — того же блока, что
   раскрывают свои ключи Spotify, поэтому собственной рамки ему не нужно. */
.ext-devices {
    display: flex;
    flex-direction: column;
    gap: var(--tearinbot-space-3);
}

.ext-device {
    display: flex;
    align-items: center;
    gap: var(--tearinbot-space-3);
    padding: var(--tearinbot-space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--tearinbot-radii-md);
    background-color: var(--tearinbot-colors-backgroundSecondary);
}

.ext-device-info {
    display: flex;
    flex-direction: column;
    gap: var(--tearinbot-space-1);
    min-width: 0;
    flex: 1 1 auto;
}

.ext-device-name {
    margin: 0;
    font-weight: var(--tearinbot-fontWeights-bold);
    font-size: var(--tearinbot-fontSizes-sm);
    color: var(--bs-font-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ext-device-meta {
    margin: 0;
    font-size: var(--tearinbot-fontSizes-xs);
    color: var(--text-muted);
}

.ext-device-actions {
    display: flex;
    align-items: center;
    gap: var(--tearinbot-space-3);
    flex: 0 0 auto;
}

/* Тумблер согласия подписан прямо в строке: без подписи из двух одинаковых переключателей
   на соседних браузерах невозможно понять, который чем управляет. */
.ext-device-share {
    display: flex;
    align-items: center;
    gap: var(--tearinbot-space-2);
    margin: 0;
    font-size: var(--tearinbot-fontSizes-xs);
    color: var(--text-muted);
    cursor: pointer;
}

@media (max-width: 48em) {
    .ext-device {
        flex-wrap: wrap;
    }

    .ext-device-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* ————— Кнопка установки ————— */

/* Значок браузера рядом с подписью: человек видит на кнопке свой браузер и не гадает, туда ли
   она ведёт. Размер — чуть меньше строки, иначе знак спорит с текстом за внимание. */
.ext-install {
    gap: var(--tearinbot-space-2);

    /* Подчёркивание досталось кнопке от ссылки, которой она является. Со значком рядом оно
       читается уже не как «сюда можно нажать», а как небрежность. */
    text-decoration: none;
}

.ext-install-mark {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
}

.ext-install-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Сборки для этого браузера нет. Стоит там же, где была бы кнопка, и выровнено по ней:
   пустота на её месте читалась бы как поломка. */
.ext-install-missing {
    margin: 0;
    max-width: 14rem;
    text-align: right;
}

@media (max-width: 768px) {
    .ext-install-missing {
        text-align: left;
    }
}