.item-attachment{clear:both;margin:0 0 10px;width:100%;box-sizing:border-box}
.item-attachment-image img{display:block;max-width:100%;height:auto}
.item-attachment-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #e4e8ef}
.item-attachment-name{flex:1;min-width:0;overflow-wrap:anywhere;color:#263b57;line-height:1.6}
.item-attachment-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.item-attachment .item-attachment-actions>a{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;box-sizing:border-box;border:1px solid #ccd4df;border-radius:6px;background:#fff;color:#506176;font-size:12px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap}
.item-attachment .item-attachment-actions>.item-attachment-preview-button{border-color:#bfcee5;background:#f0f5ff;color:#2459a8}
.item-attachment .item-attachment-actions>a:hover{border-color:#aab8c9;background:#eef2f6;text-decoration:none}
.item-attachment .item-attachment-actions>.item-attachment-preview-button:hover{border-color:#8da9d2;background:#e3edff;color:#174583}
@media(max-width:767px),(pointer:coarse) and (max-width:1024px){.item-attachment .item-attachment-actions>a{height:44px}}
@media(max-width:480px){.item-attachment-row{flex-wrap:wrap;gap:8px}.item-attachment-name{flex-basis:100%}.item-attachment-actions{margin-left:auto}}
body.attachment-preview-open{--attachment-preview-width:48vw}
body.attachment-preview-layout{margin-right:var(--attachment-preview-width)!important;min-width:0!important}
.modal.attachment-preview-layout{width:calc(100% - var(--attachment-preview-width))!important;right:auto!important;min-width:0!important}
.modal.attachment-preview-layout .modal-dialog,.modal.attachment-preview-layout .modal_body{max-width:100%!important;min-width:0!important}
.attachment-preview-layout .container.item_view,.attachment-preview-layout #zigbang_wrap#zigbang_wrap{max-width:100%!important;min-width:0!important;box-sizing:border-box}
.attachment-preview-layout .container.item_view>.row>.col-sm-8,.attachment-preview-layout .container.item_view>.row>.col-sm-4{width:100%!important;max-width:100%!important;float:none!important;position:static!important;box-sizing:border-box}
.attachment-preview-layout #zigbang_wrap#zigbang_wrap>.zigbang_body{overflow:auto!important}
.attachment-preview-layout #zigbang_wrap#zigbang_wrap .zigbang_content_wrap{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;box-sizing:border-box}
.attachment-preview-layout #zigbang_wrap#zigbang_wrap .zigbang_content_L,.attachment-preview-layout #zigbang_wrap#zigbang_wrap .zigbang_content_R{position:static!important;float:none!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;overflow:visible!important;box-sizing:border-box}
.attachment-preview-layout #zigbang_wrap#zigbang_wrap .d2-sidebar{width:100%!important;max-width:100%!important;grid-column:1!important;grid-row:auto!important}
#modal-item#modal-item.attachment-preview-layout #zigbang_wrap#zigbang_wrap#zigbang_wrap#zigbang_wrap:is(.detail-style-two,.detail-style-three) .zigbang_content_wrap.d2-layout{grid-template-columns:minmax(0,1fr)!important}
#modal-item#modal-item.attachment-preview-layout #zigbang_wrap#zigbang_wrap:is(.detail-style-two,.detail-style-three) .d2-sidebar{grid-column:1!important;grid-row:auto!important}
.attachment-preview-layout .viewWrap:has(.item-attachment){width:100%!important;max-width:100%!important;height:auto!important}
.attachment-preview-layout .viewWrap:has(.item-attachment)>.item_view_left,.attachment-preview-layout .viewWrap:has(.item-attachment)>.item_view_right{width:100%!important;max-width:100%!important;height:auto!important;margin:0!important;overflow:visible!important;box-sizing:border-box}
.attachment-preview-layout .item_view_right:has(.item-attachment) .scroll_wrap,.attachment-preview-layout .item_view_right:has(.item-attachment) #scrollWrap{height:auto!important;max-height:none!important;overflow:visible!important}
.attachment-preview-panel{position:fixed;z-index:11000;right:0;top:0;bottom:0;width:var(--attachment-preview-width);display:flex;flex-direction:column;box-sizing:border-box;background:#f3f5f8;border-left:1px solid #ccd4df;box-shadow:-5px 0 18px #182b4218;color:#243247;font:14px/1.5 Arial,'Malgun Gothic',sans-serif;text-align:left}
.attachment-preview-panel[hidden]{display:none!important}
.attachment-preview-header{display:flex;align-items:center;gap:8px;background:#fff;padding:14px 16px;border-bottom:1px solid #dce2ea}
.attachment-preview-header strong{flex:1;min-width:0;overflow-wrap:anywhere;max-height:65px;overflow:auto;font-size:15px}
.attachment-preview-header .attachment-preview-download{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;height:36px;padding:0 12px;box-sizing:border-box;border:1px solid #bfcee5;border-radius:6px;background:#f0f5ff;color:#2459a8;font-size:13px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap}
.attachment-preview-header .attachment-preview-download:hover{background:#e3edff;border-color:#8da9d2;color:#174583;text-decoration:none}
.attachment-preview-header svg{display:block;flex-shrink:0;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.attachment-preview-panel button{border:1px solid #ccd4df;border-radius:5px;background:#fff;color:#243247;min-width:32px;height:32px;padding:0 8px;cursor:pointer;font:inherit}
.attachment-preview-panel button:disabled{opacity:.35;cursor:default}
.attachment-preview-panel button:focus-visible,.attachment-preview-panel input:focus-visible,.attachment-preview-header a:focus-visible,.item-attachment a:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.attachment-preview-header .attachment-preview-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;min-width:36px;height:36px;padding:0;box-sizing:border-box;border:1px solid #d5dde7;border-radius:6px;background:#fff;color:#506176;line-height:1}
.attachment-preview-header .attachment-preview-close:hover{background:#eef2f6;border-color:#aab8c9;color:#243247}
.attachment-preview-toolbar{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;padding:10px;border-bottom:1px solid #dce2ea;background:#fff}
.attachment-preview-toolbar input{width:52px;height:30px;border:1px solid #ccd4df;border-radius:4px;text-align:center;color:#243247;background:#fff}
.attachment-preview-status{flex-shrink:0;padding:8px 16px;color:#586a80;font-size:13px}
.attachment-preview-status:empty{display:none}
.attachment-preview-stage{flex:1;min-height:0;overflow:auto;padding:16px;overscroll-behavior:contain;cursor:grab;box-sizing:border-box;touch-action:pan-x pan-y}
.attachment-preview-stage:active{cursor:grabbing}
.attachment-preview-stage canvas{display:block;max-width:none!important;max-height:none!important;margin:0 auto;background:#fff;box-shadow:0 2px 8px #17203320;user-select:none}
@media(max-width:992px){
 .viewWrap:has(>.item_view_right .item-attachment){height:auto!important}
 .viewWrap:has(>.item_view_right .item-attachment)>.item_view_left,.viewWrap>.item_view_right:has(.item-attachment){display:block!important;width:100%!important;max-width:100%!important;height:auto!important;margin:0!important;overflow:visible!important;box-sizing:border-box}
 .viewWrap>.item_view_right:has(.item-attachment)>.right_top_box{display:none!important}
 .viewWrap>.item_view_right:has(.item-attachment) .scroll_wrap,.viewWrap>.item_view_right:has(.item-attachment) #scrollWrap{height:auto!important;max-height:none!important;overflow:visible!important}
}
@media(max-width:767px),(pointer:coarse) and (max-width:1024px){
 body.attachment-preview-open{--attachment-preview-width:100vw}
 .attachment-preview-panel,.attachment-preview-panel.is-modal{transform:none;border-radius:0;inset:0;width:100%;height:100vh;height:100dvh;border:0;box-shadow:none;padding-bottom:env(safe-area-inset-bottom);z-index:2147483000}
 .attachment-preview-header{flex-shrink:0;padding:12px;padding-top:max(12px,env(safe-area-inset-top))}
 .attachment-preview-header strong{font-size:13px;max-height:40px}
 .attachment-preview-panel button{height:40px;min-width:40px}
 .attachment-preview-header .attachment-preview-close{width:44px;height:44px;min-width:44px}
 .attachment-preview-header .attachment-preview-download{height:44px;padding:0 10px}
 .attachment-preview-toolbar{flex-shrink:0;padding:8px;gap:6px}
 .attachment-preview-toolbar input{height:40px}
 .attachment-preview-stage{padding:12px}
}

html.attachment-preview-modal-open,body.attachment-preview-modal-open{overflow:hidden!important;overscroll-behavior:none}
.attachment-preview-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:2147482999}
.attachment-preview-backdrop[hidden]{display:none!important}
@media(min-width:768px){.attachment-preview-panel.is-modal{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(1100px,calc(100vw - 48px));height:calc(100vh - 48px);height:calc(100dvh - 48px);border:1px solid #ccd4df;border-radius:10px;overflow:hidden;box-shadow:0 16px 60px #0005;z-index:2147483000}}
@media(pointer:coarse) and (min-width:768px) and (max-width:1024px){.attachment-preview-panel.is-modal{inset:0;transform:none;width:100%;height:100vh;height:100dvh;border:0;border-radius:0}}