dialog.attachment-viewer{box-sizing:border-box;position:fixed;inset:0;width:min(1120px,100vw);max-width:100vw;height:min(920px,100dvh);max-height:100dvh;margin:auto;padding:0;border:0;border-radius:14px;background:#eef3fa;color:#173255;box-shadow:0 20px 80px #081b3c66}
dialog.attachment-viewer[open]{display:flex;flex-direction:column}
dialog.attachment-viewer::backdrop{background:#091b36bb}
.attachment-viewer *{box-sizing:border-box}
.av-head{display:flex;align-items:center;gap:12px;padding:13px 18px;background:#1457b4;color:white;flex-shrink:0}
.av-head h2{font-size:16px;line-height:1.5;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-viewer button{font:inherit;font-size:14px;line-height:1.3;font-weight:650;border:1px solid #c4d4eb;border-radius:8px;background:white;color:#1457b4;padding:10px 14px;min-height:40px;cursor:pointer;white-space:nowrap}
.attachment-viewer button:disabled{opacity:.4;cursor:default}
.av-head button{color:white;background:#ffffff15;border-color:#ffffff60}
.av-tools{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;flex-shrink:0;flex-wrap:wrap;border-bottom:1px solid #cbd9eb}
.av-tools[hidden]{display:none}
.av-tools input{width:54px;padding:8px;text-align:center;border:1px solid #bdd0e8;border-radius:6px;color:#173255;background:white}
.av-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px;position:relative}
.av-image,.av-pdf{display:block;margin:0 auto;height:auto;max-width:100%;box-shadow:0 3px 16px #14395c22;touch-action:none}
.av-video{display:block;margin:auto;max-width:100%;max-height:100%;background:#10233d}
.av-status{font-size:12px;line-height:1.6;padding:7px 16px;margin:0;flex-shrink:0;color:#426382;background:#e8f0fb}
.av-footer{display:flex;justify-content:center;gap:10px;padding:10px 12px max(10px,env(safe-area-inset-bottom));background:white;border-top:1px solid #ccdaeb;flex-shrink:0;flex-wrap:wrap}
.av-footer button:first-child{background:#1457b4;color:white;border-color:#1457b4}
.av-empty{padding:40px 16px;text-align:center;line-height:1.8;color:#45637f}
.av-document{background:white;color:#203651;padding:22px;border-radius:8px;max-width:950px;margin:auto;overflow-wrap:anywhere;white-space:pre-wrap;font:15px/1.8 system-ui,sans-serif}
.av-document p{margin:0 0 12px;min-height:1em}.av-document h3{margin:18px 0 10px;font-size:18px}
.av-table{overflow:auto;max-width:100%;margin-bottom:18px;white-space:normal}.av-table table{border-collapse:collapse;font-size:13px}.av-table td{border:1px solid #ccd8e7;padding:7px;min-width:70px;max-width:320px;white-space:pre-wrap}
.upload-preview{cursor:pointer}.upload-preview button{border:0;background:transparent;color:#1457b4;font:inherit;text-align:left;cursor:pointer}
.upload-source-buttons{display:flex;gap:8px;flex-wrap:wrap}.upload-source-buttons label{flex:1;margin:0;min-width:140px}
.upload-source-buttons input[type=file]{max-width:100%;font-size:12px}
.pending-preview{display:flex;align-items:center;gap:8px;background:transparent;color:inherit;border:0;min-width:0;text-align:left;cursor:pointer;padding:3px}.pending-preview img{height:54px;width:54px;object-fit:cover;border-radius:7px}.pending-preview span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){dialog.attachment-viewer{width:100vw;height:100dvh;border-radius:0}.av-head{padding:10px 12px}.av-tools{gap:5px}.av-tools button{padding:8px 10px}.av-body{padding:8px}.av-footer{gap:7px}.av-footer button{padding:10px;font-size:13px}.av-document{padding:15px;font-size:14px}}

.attachment-viewer .av-head h2{color:#fff}