/* components/StepFileAccessUi.css
 *
 * [2026-09-29] НОВЫЙ ФАЙЛ — пилюля «Только просмотр» и состояние «Нет доступа» файла шага (Word,
 * Excel, PDF, Fish). Пилюля обобщает `.fish-readonly-banner` (modules/fish/styles/fish.css) и
 * следует канону «Status pills» DESIGN.md: `radius-full`, 11–12 px, medium, семантические токены
 * warning. Только токены styles/themes.css — тёмная тема приходит с ними.
 * Ref: docs/TZ_STEP_FILE_ACCESS_STATES_2026-09-29.md §4. Chat: file-create-save-paths-2026-09-29.
 */

/* Полоса пилюли: полоса над областью файла, сама нажатий не ловит — ловит только пилюля. Так пилюля
   стоит по центру и не закрывает органы редактора по краям. */
.file-access-pill-bar {
    z-index: var(--z-sticky);
    display: flex;
    justify-content: center;
    padding: var(--space-2) var(--space-4) 0;
    box-sizing: border-box;
    pointer-events: none;
}

/* [2026-09-29] Над областью файла (Word, PDF, Excel): `position: fixed` по прямоугольнику области
   (компонент ставит top/left/width). Внутрь области полоса не вставляется — там flex-строка, и полоса
   вставала колонкой слева от листа (живой снимок 2026-09-29). */
.file-access-pill-bar--anchored {
    position: fixed;
}

.file-access-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    pointer-events: auto;
}

.file-access-pill[data-state='checking'] {
    padding-right: var(--space-3);
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border-color: var(--color-info);
}

.file-access-pill .material-icons {
    font-size: 18px;
}

.file-access-pill-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-access-pill-edit {
    flex-shrink: 0;
    border-radius: var(--radius-full);
}

.file-access-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: file-access-spin var(--spinner-duration) linear infinite;
}

@keyframes file-access-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .file-access-spinner {
        animation: none;
    }
}

/* «Нет доступа»: состояние страницы на месте файла, не модальное окно. */
.file-access-host {
    position: relative;
}

.file-access-denied {
    position: absolute;
    inset: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: center;
}

.file-access-denied > .material-icons {
    font-size: 40px;
    color: var(--text-secondary);
}

.file-access-denied-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.file-access-denied-reason {
    margin: 0;
    max-width: 480px;
    color: var(--text-secondary);
}

.file-access-denied-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.file-access-denied-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    text-decoration: none;
}

.file-access-denied-actions .material-icons {
    font-size: 18px;
}