/* ============================================================
 * FILE TILE — компонент плитки прикреплённого файла
 *
 * Используется в двух местах:
 *   1. Preview внутри input-container (до отправки сообщения)
 *      модификатор .file-tile--preview
 *   2. В отправленном сообщении пользователя (история)
 *      модификатор .file-tile--in-message
 *
 * Базовые размеры и разметка одинаковы (Figma 960:6077, 964:6446).
 * Разница — цвет border и наличие кнопки удаления.
 * ============================================================ */

.file-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 196px;
    height: 50px;
    padding: 8px;
    background: #FFFFFF;
    border-radius: 15px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Preview (до отправки) — голубой border #B7BEFF.
   X-кнопка удаления видна. */
.file-tile--preview {
    border: 2px solid #B7BEFF;
}

/* В отправленном сообщении — спокойный border #ECEEFF.
   X-кнопка скрывается (файл уже отправлен). */
.file-tile--in-message {
    border: 2px solid #ECEEFF;
}

.file-tile--in-message .file-tile-remove {
    display: none;
}

/* Иконка файла — синий квадрат 32×32 с белой file-svg внутри.
   Во время загрузки заменяется на file_loading.svg (тот же
   квадрат со спиннером), плитка не дёргается по размеру. */
.file-tile-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: block;
}

/* Блок текстовых метаданных — имя и расширение. */
.file-tile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    line-height: 1;
}

.file-tile-name {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}

.file-tile-name a,
.file-tile-name a:visited {
    color: inherit;
    text-decoration: none;
}

.file-tile-name a:hover {
    text-decoration: underline;
}

.file-tile-ext {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    margin-top: 3px;
    line-height: 1;
}

/* X-кнопка удаления файла перед отправкой.
   Позиционирована абсолютно над правым верхним углом плитки
   (Figma 964:6446, node 964:6518). */
.file-tile-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #ECEEFF;
    color: rgba(0, 0, 0, 0.6);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.file-tile-remove:hover {
    color: #cc3333;
    border-color: #cc3333;
}