/* Media mosaics + full-image viewer. Mosaic reads as one rounded block (X-style):
   outer radius on the grid, 2px inner gutters, square tiles. */

.phone .media-block.media-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;position:relative;margin:12px 0 4px;border:0;border-radius:16px;background:transparent;overflow:hidden;isolation:isolate}
.phone .media-mosaic.media-count-1{display:block;aspect-ratio:auto}
.phone .media-mosaic.media-count-1 .media-tile{height:220px}
.phone .media-mosaic.media-count-2{aspect-ratio:2/1}
.phone .media-mosaic.media-count-3,.phone .media-mosaic.media-count-4{aspect-ratio:3/2;grid-template-rows:repeat(2,minmax(0,1fr))}
.phone .media-mosaic.media-count-3>.media-tile:first-child{grid-row:span 2}
.phone .media-tile{min-width:0;min-height:0;position:relative;border-radius:0;overflow:hidden;background:var(--surface)}
.phone .media-open{position:relative;display:block;padding:0;width:100%;height:100%;border:0;background:transparent;cursor:zoom-in;border-radius:inherit}
.phone .media-open:disabled{opacity:1;cursor:default}
.phone .media-tile img{display:block;width:100%;height:100%;object-fit:cover}
.phone .media-open:focus-visible{outline:2px solid var(--brand-secondary);outline-offset:-3px}
.phone .media-tile-status{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--surface);color:var(--muted);font-size:12px;line-height:1.4;text-align:center}
.phone .media-tile-status>svg{width:19px;height:19px}
.phone .media-tile-status .btn{font-size:13px;min-height:44px;line-height:1;padding:8px;max-width:100%;margin:-4px 0 -6px}
.phone .media-count-3 .media-tile:not(:first-child) .media-tile-status,.phone .media-count-4 .media-tile-status{gap:2px;padding:5px}
.phone .media-count-3 .media-tile:not(:first-child) .media-tile-status>svg,.phone .media-count-4 .media-tile-status>svg{display:none}
.phone .media-remove{position:absolute;right:0;top:0;display:grid;place-items:center;z-index:5;border:0;padding:10px;width:44px;height:44px;background:transparent;color:#fff}
.phone .media-remove svg{width:24px;height:24px;padding:5px;stroke-width:2;border-radius:50%;background:#000000B3;box-shadow:0 0 0 1px #ffffff26}
.phone .media-composer-caption{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;min-height:44px}
.phone .media-composer-caption .btn{font-size:13px;color:var(--text);padding:8px 0;min-height:44px}
.phone .pa-answer-content:has(.composer-mosaic) .pa-writing-field textarea{min-height:68px}
.phone .pa-answer-attachments{padding:0 16px 8px}
.phone .composer-mosaic.media-count-1 .media-tile{height:210px}
.phone .pa-demo-picker .media-mosaic{height:90px;margin:0;border-radius:0}
.phone .pa-demo-picker .media-mosaic.media-count-1 .media-tile{height:100%;border-radius:0}
.phone .pa-order-row .media-mosaic{width:56px;flex-shrink:0;margin:0;border-radius:10px}
.phone .pa-order-row .media-mosaic.media-count-1 .media-tile{height:56px;width:56px}
.phone .pa-camera-preview .media-mosaic.media-count-1 .media-tile{height:250px}

.phone .sheet:has(.media-viewer){max-height:calc(100% - 53px);height:calc(100% - 53px);padding:12px 16px 28px;display:flex;flex-direction:column}
.phone .sheet:has(.media-viewer) .sheet-heading{margin-bottom:0}
.phone .media-viewer{flex:1;min-height:0;display:flex;flex-direction:column}
.phone .media-viewer-image{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y;user-select:none}
.phone .media-viewer-image img{width:100%;height:100%;object-fit:contain;border-radius:0}
.phone .media-viewer-controls{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:13px;color:var(--muted)}
.phone .media-viewer-thumbs{display:flex;gap:8px;justify-content:center;padding:8px 0 12px}
.phone .media-viewer-thumbs>button{width:48px;height:48px;padding:3px;background:transparent;border:1.5px solid transparent;border-radius:10px}
.phone .media-viewer-thumbs>button.selected{border-color:var(--text)}
.phone .media-viewer-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.phone .media-viewer-thumbs svg{width:20px;height:20px;color:var(--muted)}
.phone .media-placeholder{display:block;width:100%;height:100%}