.comp-clip { flex: none; width: 36px; height: 36px; margin: 4px 0 4px 4px; color: var(--faint); }
.comp-clip svg { width: 16px; height: 16px; }
.comp-clip:hover { color: var(--text); }
.comp-box .comp-clip ~ .comp-field { padding-left: var(--s1); }
.composer.has-files .comp-box:has(.comp-field.ed-empty) .comp-send { visibility: visible; color: var(--text); }
.composer.has-files .comp-box { border-radius: 0 0 var(--radius-nested) var(--radius-nested); }
.comp-files[hidden], .comp-tray[hidden], .comp-note[hidden] { display: none; }
.comp-note { margin: 0 0 var(--s2); padding: 0 var(--s1); color: var(--pill-warning-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.comp-tray {
  display: flex; gap: var(--s2); margin: 0; padding: var(--s2) var(--s2) 0; overflow-x: auto; overscroll-behavior: none; list-style: none;
  border-radius: var(--radius-nested) var(--radius-nested) 0 0; background: var(--raised); scrollbar-width: thin;
}
.comp-file {
  position: relative; flex: none; display: grid; grid-template-columns: 48px minmax(0, 1fr) 28px; align-items: center; gap: var(--s2);
  width: 248px; padding: var(--s2); overflow: hidden; border-radius: var(--radius-small); background: var(--active);
}
.cf-thumb { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-small); background: var(--active-hover); color: var(--muted); }
.cf-thumb svg { width: 20px; height: 20px; }
.cf-thumb img { display: block; width: 48px; height: 48px; object-fit: cover; }
.cf-text { min-width: 0; }
.cf-name { display: block; overflow: hidden; color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cf-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.cf-sub { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.comp-file[data-state="failed"] .cf-sub { color: var(--pill-negative-ink); }
.cf-retry { font-size: var(--fs-small); line-height: var(--lh-small); }
.cf-x { width: 28px; height: 28px; color: var(--muted); }
.cf-x svg { width: 14px; height: 14px; }
.cf-x:hover { color: var(--text); }
.cf-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 1; transition: opacity var(--t-slow) var(--ease-out); }
.cf-fill { display: block; height: 100%; background: var(--text); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-fast) linear; }
.comp-file[data-state="ready"] .cf-bar, .comp-file[data-state="failed"] .cf-bar { opacity: 0; }

.att-drop {
  position: absolute; inset: var(--s2); z-index: 40; display: grid; place-content: center; gap: var(--s1); border-radius: var(--radius-card);
  background: var(--surface); text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease-out);
}
.att-drop.on { opacity: 0.96; }
.att-drop-t { color: var(--text); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.att-drop-s { color: var(--muted); }

.att { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s2); margin-top: var(--s2); white-space: normal; }
.att-gallery { display: grid; gap: 4px; max-width: 100%; }
.att-gallery.one { display: block; }
.att-gallery.c2 { grid-template-columns: repeat(2, minmax(0, 200px)); }
.att-gallery.c3 { grid-template-columns: repeat(3, minmax(0, 160px)); }
.att-img { position: relative; display: block; max-width: 100%; overflow: hidden; border-radius: var(--radius-small); background: var(--raised); cursor: zoom-in; }
.att-gallery:not(.one) .att-img { aspect-ratio: 1; }
.att-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.att-img.in img { opacity: 1; }
.m:hover .att-img, .m:focus-within .att-img, .m.open .att-img { background: var(--active); }
.att-img:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.att-img.gone { cursor: default; }
.att-gone { display: grid; place-items: center; height: 100%; padding: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); text-align: center; }

.att-files { display: grid; gap: var(--s1); width: min(100%, 440px); margin: 0; padding: 0; list-style: none; }
.att-file { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--radius-small); background: var(--raised); }
.m:hover .att-file, .m:focus-within .att-file, .m.open .att-file { background: var(--active); }
.att-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-small); background: var(--active); color: var(--muted); }
.m:hover .att-ico, .m:focus-within .att-ico, .m.open .att-ico { background: var(--active-hover); }
.att-ico svg { width: 18px; height: 18px; }
.att-text { min-width: 0; }
.att-name { display: block; overflow: hidden; color: var(--text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.att-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.att-check { display: inline-flex; align-items: center; gap: 4px; }
.att-check:empty { display: none; }
.att-check svg { width: 14px; height: 14px; flex: none; }
.att-check.ok { color: var(--accent); }
.att-check.bad { color: var(--pill-warning-ink); }
.att-dl { width: 32px; height: 32px; color: var(--muted); }
.att-dl svg { width: 16px; height: 16px; }
.att-dl:hover { color: var(--text); }
.m.bad .att-name { color: var(--pill-warning-ink); }

dialog.lightbox {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; border: 0;
  background: transparent; color: #f2f3f5; color-scheme: dark;
}
dialog.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
dialog.lightbox::backdrop { background: rgb(12 12 14 / 0.9); }
.lb-top { display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s3) var(--s3) var(--s3) var(--s5); }
.lb-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name { font-weight: 600; }
.lb-sub { color: #b5bac1; font-variant-numeric: tabular-nums; }
.lb-check.ok { color: #78aaff; }
.lb-check.bad { color: #f0c674; }
.lightbox .btn { border-color: #5a5d65; background: transparent; color: #f2f3f5; }
.lightbox .btn:hover { background: #313338; }
.lightbox .icon-btn { width: 40px; height: 40px; color: #f2f3f5; }
.lightbox .icon-btn svg { width: 18px; height: 18px; }
.lightbox .icon-btn:hover { background: #313338; }
.lb-stage { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: minmax(0, 1fr); align-items: center; min-height: 0; padding: 0 var(--s2) var(--s5); }
.lb-nav { justify-self: center; }
.lb-prev { grid-column: 1; grid-row: 1; }
.lb-next { grid-column: 3; grid-row: 1; }
.lb-frame { grid-column: 2; grid-row: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-width: 0; height: 100%; min-height: 0; }
.lb-stage:not(:has(> .lb-nav:not([hidden]))) .lb-frame { grid-column: 1 / -1; }
.lb-img { display: block; width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-small); opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.lb-frame.in .lb-img { opacity: 1; }

@media (max-width: 760px) {
  .comp-file { width: 216px; }
  .att-gallery.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 320px); }
  .att-gallery.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 360px); }
  .lb-top { padding-left: var(--s4); }
  .lb-dl span { display: none; }
  .lb-stage { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 0 0 var(--s4); }
  .lb-stage:not(:has(> .lb-nav:not([hidden]))) .lb-img { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-bar, .cf-fill, .att-drop, .att-img img, .lb-img { transition: none; }
}