/* Optional native-dialog reader. Use inside a .arco-ui island. */
.arco-ui .arco-reader { width: min(980px,calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--arco-brass); border-radius: 6px; background: var(--arco-archive); color: var(--arco-text); box-shadow: 0 20px 70px #0009; }
.arco-ui .arco-reader::backdrop { background: #070b11cc; }
.arco-ui .arco-reader__header { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; background: #1c232c; border-bottom: 1px solid var(--arco-brass); }
.arco-ui .arco-reader__header h2 { font-size: 1.1rem; flex: 1; }
.arco-ui .arco-reader__body { padding: 1rem; display: grid; gap: 1rem; }
.arco-ui .arco-reader__metadata { color: var(--arco-muted); font-size: .85rem; }
.arco-ui .arco-reader__tray { overflow: auto; max-height: 52vh; max-height: 52dvh; padding: 1rem; border: 1px solid var(--arco-line); background: #101316; text-align: center; }
.arco-ui .arco-reader__image { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; }
.arco-ui .arco-reader__tray[data-enlarged=true] .arco-reader__image { width: auto; max-width: none; }
.arco-ui .arco-reader__transcript { white-space: pre-wrap; line-height: 1.8; max-width: 70ch; color: var(--arco-text); padding: 1rem; border-inline-start: 2px solid var(--arco-brass); background: #14171d; }
.arco-ui .arco-reader__caption { color: var(--arco-muted); font-size: .9rem; }
@media (max-width:600px) {
  .arco-ui .arco-reader { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: 4px; }
  .arco-ui .arco-reader__header { padding: .65rem max(.65rem,env(safe-area-inset-right)) .65rem max(.65rem,env(safe-area-inset-left)); }
  .arco-ui .arco-reader__body { padding: .75rem .75rem max(.75rem,env(safe-area-inset-bottom)); }
}
@media (forced-colors:active) { .arco-ui .arco-reader, .arco-ui .arco-reader__tray, .arco-ui .arco-reader__transcript, .arco-ui .arco-reader__header { background: Canvas; color: CanvasText; border-color: CanvasText; } }