.attachment-section { display: grid; gap: 1rem; }
.attachment-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.attachment-section-heading h2 { margin: .1rem 0 .25rem; }
.attachment-section-heading p { margin: 0; color: var(--muted); }
.attachment-section-heading > span { flex: 0 0 auto; padding: .35rem .65rem; border-radius: 999px; color: #087443; background: #e8f5ed; font-size: .72rem; font-weight: 800; }
.attachment-list { display: grid; gap: .65rem; }
.attachment-card { display: grid; min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: .8rem; background: #fff; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.attachment-card-icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; color: #078149; background: #e8f5ed; border-radius: .7rem; }
.attachment-card-icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.attachment-card-copy { min-width: 0; }
.attachment-card-copy strong, .attachment-card-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-card-copy strong { color: var(--ink); font-size: .82rem; }
.attachment-card-copy span { margin-top: .18rem; color: var(--muted); font-size: .68rem; }
.attachment-card-actions { display: flex; align-items: center; gap: .4rem; }
.attachment-remove { display: flex; grid-column: 2 / -1; align-items: center; gap: .4rem; color: #8d302c; font-size: .72rem; }
.attachment-remove input { width: 1rem; height: 1rem; margin: 0; accent-color: #aa3933; }
.attachment-empty { display: grid; min-height: 9rem; place-items: center; align-content: center; padding: 1.25rem; color: var(--muted); background: #f8faf9; border: 1px dashed #cbd8d0; border-radius: .8rem; text-align: center; }
.attachment-empty svg { width: 2rem; height: 2rem; margin-bottom: .45rem; fill: none; stroke: #078149; stroke-width: 1.7; }
.attachment-empty strong { color: var(--ink); }
.attachment-empty p { margin: .2rem 0 0; }
.attachment-add-form { display: grid; gap: .75rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.attachment-add-form > .button { justify-self: start; }

.attachment-upload { min-width: 0; margin: 0; padding: .85rem; border: 1px solid #cfe0d6; border-radius: .8rem; background: linear-gradient(135deg, #f5fbf7, #fff); }
.attachment-upload legend { padding: 0 .35rem; color: var(--ink); font-size: .8rem; font-weight: 800; }
.attachment-upload-intro { margin: 0 0 .7rem; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.attachment-upload-choices { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attachment-upload-choice { position: relative; display: flex; min-width: 0; min-height: 3.7rem; align-items: center; gap: .65rem; padding: .7rem; cursor: pointer; border: 1px solid #c8d8cf; border-radius: .7rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.attachment-upload-choice:hover { border-color: #52a779; box-shadow: 0 .35rem 1rem rgba(22, 88, 54, .08); transform: translateY(-1px); }
.attachment-upload-choice:focus-within { outline: 3px solid rgba(32, 147, 84, .2); border-color: #078149; }
.attachment-upload-choice svg { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; color: #078149; fill: none; stroke: currentColor; stroke-width: 1.8; }
.attachment-upload-choice span { min-width: 0; }
.attachment-upload-choice strong, .attachment-upload-choice small { display: block; }
.attachment-upload-choice strong { color: var(--ink); font-size: .73rem; }
.attachment-upload-choice small { margin-top: .12rem; color: var(--muted); font-size: .62rem; }
.attachment-upload-choice input[type="file"] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; border: 0; opacity: 0; }
.attachment-upload-status { margin-top: .7rem; padding: .65rem .75rem; border: 1px solid #cfe0d6; border-radius: .6rem; color: #385846; background: #f3faf6; font-size: .68rem; }
.attachment-upload-status.is-processing { color: #705600; background: #fff8df; border-color: #ead99a; }
.attachment-upload-status.is-error { color: #8d302c; background: #fff2f1; border-color: #efc7c4; }
.attachment-upload-status strong { color: inherit; }

.attachment-viewer { width: min(92rem, calc(100vw - 2rem)); max-width: none; height: min(54rem, calc(100dvh - 2rem)); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 1rem; background: #fff; box-shadow: 0 2rem 5rem rgba(4, 28, 17, .32); }
.attachment-viewer::backdrop { background: rgba(4, 25, 16, .72); backdrop-filter: blur(3px); }
.attachment-viewer-shell { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.attachment-viewer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.attachment-viewer-header h2 { max-width: 55rem; margin: .05rem 0 .15rem; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.attachment-viewer-header p { margin: 0; color: var(--muted); font-size: .68rem; }
.attachment-viewer-actions { display: flex; flex: 0 0 auto; gap: .45rem; }
.attachment-viewer-actions svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.attachment-viewer-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; background: #17221c; }
.attachment-viewer-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.attachment-viewer-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.attachment-viewer-stage [hidden] { display: none !important; }
.attachment-viewer-nav { position: absolute; z-index: 2; top: 50%; display: grid; width: 2.6rem; height: 3.5rem; place-items: center; padding: 0; color: #fff; background: rgba(2, 18, 10, .66); border: 1px solid rgba(255,255,255,.25); border-radius: .65rem; font-size: 1.75rem; transform: translateY(-50%); }
.attachment-viewer-nav:hover { background: rgba(7, 84, 43, .9); }
.attachment-viewer-nav.is-previous { left: .75rem; }
.attachment-viewer-nav.is-next { right: .75rem; }
.attachment-viewer-unavailable { color: #fff; text-align: center; }
.attachment-viewer-unavailable svg { width: 3rem; height: 3rem; fill: none; stroke: #84d0a3; stroke-width: 1.5; }
.attachment-viewer-unavailable h3 { margin: .6rem 0 .2rem; }
.attachment-viewer-unavailable p { margin: 0; color: #c9d9d0; }
.attachment-viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1rem; color: var(--muted); border-top: 1px solid var(--border); font-size: .65rem; }
.attachment-viewer-footer [data-attachment-viewer-position] { color: var(--ink); font-weight: 800; }

@media (max-width: 52rem) {
  .attachment-upload-choices { grid-template-columns: 1fr; }
  .attachment-card { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .attachment-card-actions { grid-column: 1 / -1; }
  .attachment-remove { grid-column: 1 / -1; }
  .attachment-viewer { width: 100vw; height: 100dvh; border-radius: 0; }
  .attachment-viewer-header { align-items: stretch; flex-direction: column; }
  .attachment-viewer-actions { justify-content: space-between; }
  .attachment-viewer-actions .button { flex: 1; justify-content: center; }
  .attachment-viewer-footer { align-items: flex-start; flex-direction: column; gap: .2rem; }
}

.attachment-upload-choice { height: auto; align-self: start; }
.attachment-upload-choice input[type="file"] { inset: 0; width: 100%; height: 100%; max-height: none; cursor: pointer; }