/* Supporting documents for an application (any service that takes files): the paperclip in the composer and the tray above the input. */
.attach-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px;
  margin-inline-end: 8px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--md-on-surface-variant);
  cursor: pointer;
}
.attach-btn[hidden], .attach-tray[hidden] { display: none; }
.attach-btn:hover:not(:disabled) { background: var(--md-surface-container-high); }
.attach-btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.attach-btn:disabled { opacity: .5; cursor: progress; }
.attach-btn.off { opacity: .5; }   /* files can't go yet: a click says why */
.attach-btn .ic { inline-size: 22px; block-size: 22px; }

/* "Choose files" under a reply that was asked to attach a file */
.service-attach {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-block: 8px; padding-inline: 14px;
  border: 1px solid var(--md-outline); border-radius: 20px;
  background: var(--md-surface-container-high); color: var(--md-on-surface);
  font: inherit; font-size: .875rem; cursor: pointer;
}
.service-attach:hover { background: var(--md-surface-container-highest); }
.service-attach:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.service-attach .ic { inline-size: 18px; block-size: 18px; }

.attach-tray {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 8px; padding: 0;
}
/* each file as a card, as Claude's composer shows them: a picture shows itself, any other file its name and type */
.attach-chip {
  position: relative; flex: none;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  inline-size: 160px; block-size: 88px; padding: 10px 12px;
  border: 1px solid var(--md-outline-variant); border-radius: 12px;
  background: var(--md-surface-container-high); color: var(--md-on-surface);
  font-size: .8125rem; overflow: hidden;
}
.attach-chip.is-image { inline-size: 88px; padding: 0; background: var(--md-surface-container-highest); }
.attach-thumb { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.attach-chip.is-image .attach-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.attach-kind { position: absolute; inset-block-start: 10px; inset-inline-start: 12px; inline-size: 20px; block-size: 20px;
  color: var(--md-on-surface-variant); }
.attach-name {
  min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.attach-size { color: var(--md-on-surface-variant); font-size: .6875rem; white-space: nowrap; }
.attach-x {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 22px; block-size: 22px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(0 0 0 / .6); color: #fff;
  opacity: 0; transition: opacity .12s;
}
.attach-chip:hover .attach-x, .attach-x:focus-visible { opacity: 1; }
@media (hover: none) { .attach-x { opacity: 1; } }
.attach-x:focus-visible { outline: 2px solid var(--md-primary); }
.attach-x .ic { inline-size: 12px; block-size: 12px; }
.attach-mark {
  position: absolute; inset-block-end: 6px; inset-inline-end: 6px; inline-size: 18px; block-size: 18px;
  border-radius: 50%; background: var(--md-surface-container-high);
}
/* the files a message was sent with, in its bubble (thread.js youNode) */
.you-files { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.you-file {
  display: inline-flex; align-items: center; gap: 6px; max-inline-size: 100%; min-inline-size: 0;
  padding: 4px 10px; border: 1px solid var(--md-outline-variant); border-radius: 16px;
  background: var(--md-surface-container-high); color: var(--md-on-surface); font-size: .875rem;
}
.you-file > span { min-inline-size: 0; max-inline-size: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-file .ic { flex: none; inline-size: 16px; block-size: 16px; }
.you-file.is-image { padding: 0; border-radius: 12px; overflow: hidden; }
.you-file.is-image img { display: block; max-inline-size: 220px; max-block-size: 220px; object-fit: contain; }
.attach-chip.unrelated { border-color: var(--md-error); }
/* a file uploaded opens when clicked, in the tray and in its message's bubble */
.attach-chip.opens { cursor: pointer; }
.attach-chip.opens:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.you-file > a { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; color: inherit; text-decoration: none; }
.you-file > a:hover > span { text-decoration: underline; }
.you-file > a > span { min-inline-size: 0; max-inline-size: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-file > a .ic { flex: none; inline-size: 16px; block-size: 16px; }
.you-file.is-image > a img { display: block; max-inline-size: 220px; max-block-size: 220px; object-fit: contain; }
.attach-unfit { color: var(--md-error); }
.attach-checking { animation: spark-turn 1s linear infinite; color: var(--md-on-surface-variant); }
.attach-fits { color: var(--ua-success); }

/* a file read as not fitting its application: what fits instead, and the choice to keep it or change it */
.attach-warn {
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px;
  padding-block: 8px; padding-inline: 12px;
  border-radius: var(--md-shape-lg);
  background: var(--md-error-container); color: var(--md-on-error-container);
  font-size: .8125rem; line-height: 1.4;
}
.attach-warn > .ic { flex: none; inline-size: 16px; block-size: 16px; margin-top: 2px; color: var(--md-error); }
.attach-warn-text { flex: 1 1 240px; min-inline-size: 0; }
.attach-warn-acts { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.attach-warn-acts button {
  padding-block: 4px; padding-inline: 12px;
  border: 1px solid var(--md-outline); border-radius: 16px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.attach-warn-acts button.primary { border-color: transparent; background: var(--md-error); color: var(--md-on-error); }
.attach-warn-acts button:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

@media (max-width: 480px) {
  .attach-chip:not(.is-image) { inline-size: 140px; }
}