/* Вложения: один вид для AI Hub и для чата кабинета.

   Токены берутся из палитры страницы; если страница их не объявила, значения
   в var(--x, fallback) подстрахуют. Правил «что можно приложить» здесь нет —
   их задаёт backend, компонент только показывает результат. */

.att{display:flex;flex-direction:column;gap:8px}
.att[hidden]{display:none}

.att-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}

.att-item{
  position:relative;display:flex;align-items:center;gap:9px;
  max-width:100%;padding:7px 9px;
  background:var(--card2,#121009);border:1px solid var(--line,#2B2118);
  border-radius:12px;overflow:hidden;
}
.att-item[data-state="error"]{border-color:var(--bad,#ff6480)}
.att-item[data-state="ready"]{border-color:var(--line,#2B2118)}

.att-thumb{
  width:38px;height:38px;flex:0 0 38px;border-radius:8px;overflow:hidden;
  background:var(--line2,#201912);display:flex;align-items:center;justify-content:center;
}
.att-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.att-thumb svg{width:18px;height:18px;stroke:var(--soft,#7C7061);fill:none;stroke-width:1.8}

.att-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.att-name{
  font-size:12.5px;color:var(--text,#F3ECE1);max-width:190px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.att-meta{font-size:11px;color:var(--soft,#7C7061);display:flex;gap:6px;align-items:center}
.att-meta b{font-weight:600;color:var(--muted,#B2A493)}
.att-item[data-state="error"] .att-meta{color:var(--bad,#ff6480)}

/* Полоса прогресса — фактическая передача байтов, а не таймер. */
.att-bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--line,#2B2118);
}
.att-bar i{
  display:block;height:100%;width:0;background:var(--accent,#FF8A3C);
  transition:width .15s linear;
}
.att-item[data-state="ready"] .att-bar,
.att-item[data-state="error"] .att-bar{display:none}

.att-x{
  width:24px;height:24px;flex:0 0 24px;margin-left:2px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:7px;cursor:pointer;
  color:var(--soft,#7C7061);font-size:16px;line-height:1;
}
.att-x:hover{background:var(--line2,#201912);color:var(--text,#F3ECE1)}
.att-x:focus-visible{outline:2px solid var(--accent,#FF8A3C);outline-offset:1px}

.att-retry{
  background:transparent;border:0;padding:0;cursor:pointer;
  color:var(--accent,#FF8A3C);font:inherit;font-size:11px;text-decoration:underline;
}
.att-retry:focus-visible{outline:2px solid var(--accent,#FF8A3C);outline-offset:2px}

.att-add{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px dashed var(--line,#2B2118);
  border-radius:11px;padding:7px 11px;cursor:pointer;
  color:var(--muted,#B2A493);font:inherit;font-size:12.5px;
}
.att-add:hover{border-color:var(--accent,#FF8A3C);color:var(--text,#F3ECE1)}
.att-add:focus-visible{outline:2px solid var(--accent,#FF8A3C);outline-offset:2px}
.att-add[disabled]{opacity:.5;cursor:not-allowed}
.att-add svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

.att-note{
  font-size:11.5px;color:var(--soft,#7C7061);line-height:1.45;
}
.att-note[data-tone="err"]{color:var(--bad,#ff6480)}

/* Зона перетаскивания — поверх композера, только пока файл над окном. */
.att-drop{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,10,8,.86);border:2px dashed var(--accent,#FF8A3C);
  border-radius:16px;color:var(--text,#F3ECE1);font-size:13.5px;pointer-events:none;
}
.att-drop[hidden]{display:none}

/* На узком экране плитки занимают строку целиком — иначе имя файла режется
   до нечитаемого огрызка. */
@media (max-width:430px){
  .att-item{width:100%}
  .att-name{max-width:none}
  .att-body{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .att-bar i{transition:none}
}