/* Courier letter-photo attachments and accessible lightbox. */

.attachment-field{display:grid;gap:10px}
.attachment-drop{display:grid;justify-items:center;gap:8px;min-height:144px;padding:18px;border:1px dashed #66667f;border-radius:8px;background:rgba(10,10,18,.62);text-align:center;cursor:pointer}
.attachment-drop.is-over{border-color:var(--cyan);box-shadow:0 0 18px rgba(69,240,255,.18),inset 0 0 0 1px rgba(69,240,255,.18)}
.attachment-drop-title{margin:0;color:var(--text);font-family:var(--mono);font-size:13px;font-weight:800}
.attachment-list{display:grid;gap:10px}
.attachment-item{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.attachment-thumb{width:74px;aspect-ratio:1;border:6px solid #fff;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.28);transform:rotate(-1.4deg);object-fit:cover}
.attachment-controls{display:grid;gap:10px;min-width:0}
.attachment-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.attachment-name{margin:0;color:var(--text);font-family:var(--mono);font-size:12px;font-weight:800;overflow-wrap:anywhere}
.attachment-actions{display:flex;gap:6px;flex-shrink:0}
.icon-btn{display:inline-grid;place-items:center;min-width:40px;min-height:40px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--text);font-family:var(--mono);font-size:15px;cursor:pointer}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.icon-btn:disabled{opacity:.45;cursor:not-allowed}
.mode-row{display:flex;flex-wrap:wrap;gap:8px}
.mode-chip{min-height:40px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--dim);padding:8px 10px;font-family:var(--mono);font-size:11px;font-weight:800;cursor:pointer}
.mode-chip[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(69,240,255,.25)}
.caption-input{min-height:44px}

.letter-attachments{position:relative;z-index:1;display:grid;gap:24px;margin:10px 0 24px}
.letter-photo{position:relative;margin:0;color:var(--paper-ink);font-family:var(--letter-font);justify-self:start;max-width:min(70%,420px);transform:rotate(var(--photo-tilt,-1.2deg))}
.letter-photo.is-tucked{max-width:min(52%,260px)}
.letter-photo-shell{position:relative;display:block;padding:8px 8px 14px;background:#fff;color:#241a12;border:1px solid rgba(0,0,0,.18);box-shadow:0 12px 22px rgba(0,0,0,.23);text-align:center}
.letter-photo-shell::before,.letter-photo-shell::after{content:"";position:absolute;top:-12px;width:48px;height:20px;background:rgba(244,216,143,.78);box-shadow:0 2px 4px rgba(0,0,0,.12)}
.letter-photo-shell::before{left:10px;transform:rotate(-9deg)}
.letter-photo-shell::after{right:12px;transform:rotate(8deg)}
.letter-photo-img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#e8dec8}
.letter-photo.is-tucked .letter-photo-img{aspect-ratio:4/3;object-fit:cover;max-height:180px}
.photo-caption{margin:9px 0 0;color:#4b3824;font-size:.9em;line-height:1.35;overflow-wrap:anywhere}
.photo-open-button{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.photo-open-button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;box-shadow:0 0 0 7px rgba(69,240,255,.14)}
.photo-cue{display:block;margin-top:8px;color:#5b4a32;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;font-weight:800}

.photo-lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:18px;background:rgba(3,3,8,.86)}
.photo-lightbox-dialog{width:min(980px,100%);max-height:calc(100vh - 36px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 24px 80px rgba(0,0,0,.68);padding:12px}
.photo-lightbox-head{display:flex;justify-content:flex-end;gap:8px}
.photo-lightbox-img{max-width:100%;max-height:calc(100vh - 190px);margin:auto;display:block;border-radius:6px;background:#05050d;object-fit:contain}
.photo-lightbox-caption{margin:0;color:var(--dim);font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.photo-lightbox-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}

@media (max-width:480px){
  .attachment-item{grid-template-columns:1fr}
  .attachment-thumb{width:88px}
  .letter-photo,.letter-photo.is-tucked{max-width:100%}
  .letter-photo-img{max-height:360px}
}