/* ==========================================================================
   artifact_modal.css — Fullscreen artifact modal.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══ ARTIFACT FULLSCREEN MODAL ══ */
#artifact-modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  flex-direction: column;
  background: rgba(0,0,0,.88); backdrop-filter: blur(10px);
}
#artifact-modal.open { display: flex; }
.art-modal-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--s1); border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.art-modal-title {
  flex: 1; font-size: 12.5px; font-weight: 700; color: var(--t1);
  direction: ltr; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.art-modal-actions { display: flex; gap: 6px; flex-shrink: 0; }
.art-modal-close {
  background: rgba(232,96,96,.12); border: 1px solid rgba(232,96,96,.3);
  color: var(--red); border-radius: var(--r1); padding: 4px 13px;
  font-size: 13px; cursor: pointer; transition: background .15s;
}
.art-modal-close:hover { background: rgba(232,96,96,.25); }
.art-modal-body {
  flex: 1; overflow: hidden; background: #fff; position: relative;
}
[data-theme="dark"] .art-modal-body { background: #111; }
.art-modal-body iframe, .art-modal-body object, .art-modal-body embed,
.art-modal-body img { width: 100%; height: 100%; border: none; object-fit: contain; }