/* DongfengExpress Modal (100% 复刻 deepseek_html_20251023_a062f3.html 的视觉与动效)
   命名空间：.df-modal 以避免污染 */

:root{
  --df-modal-z: 1000;
  --df-modal-radius: 12px;
  --df-modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  --df-modal-maxw: 500px;
  --df-modal-bg: #ffffff;
}

.df-modal[hidden]{ display:none !important; }

.df-modal{ position: fixed; inset: 0; z-index: var(--df-modal-z); display:flex; align-items:center; justify-content:center; }

.df-modal .modal-overlay{
  position: absolute; inset: 0; z-index:0;
  background: rgba(0,0,0,.6);
  opacity:0; animation: df-fadeIn .3s ease forwards;
}

.df-modal .modal-container{
  background: var(--df-modal-bg);
  border-radius: var(--df-modal-radius);
  box-shadow: var(--df-modal-shadow);
  width: 90%; max-width: var(--df-modal-maxw);
  padding: 30px; position: relative; z-index:1;
  transform: translateY(-20px);
  animation: df-slideUp .4s ease forwards;
}

/* Header/Body/Footer 可选分区 */
.df-modal .modal-header{ margin-bottom: 12px; }
.df-modal .modal-title{ font-size: 1.25rem; font-weight: 700; margin: 0; }
.df-modal .modal-body{ margin: 8px 0 16px; line-height: 1.7; color: var(--text, #1f2937); }
.df-modal .modal-footer{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin-top:12px; }
.df-modal .modal-footer .modal-left{ display:flex; align-items:center; gap:8px; color: var(--text-light, #6b7280); font-size:.95rem; }
.df-modal .modal-footer .modal-right{ display:flex; gap:10px; }
.df-modal .modal-footer input[type="checkbox"]{ width:16px; height:16px; }

/* 关闭按钮 */
.df-modal .modal-close{
  position:absolute; right: 12px; top: 12px;
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: #f3f4f6; color:#111; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.df-modal .modal-close:hover{ background:#e5e7eb; }

/* 打开状态开关（保留用于无动画呈现） */
.df-modal.is-open{ display:flex; }

/* 动画 */
@keyframes df-fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes df-slideUp{ from{ transform: translateY(-20px) } to{ transform: translateY(0) } }

/* 小屏适配 */
@media (max-width: 480px){
  .df-modal .modal-container{ padding: 20px; }
}

/* Media block inside modal body: supports image top/left/right layouts */
.df-modal .df-media{ margin-bottom: 12px; }
.df-modal .df-media.left,
.df-modal .df-media.right{ display:flex; gap:16px; align-items:flex-start; }
.df-modal .df-media.right{ flex-direction: row-reverse; }
.df-modal .df-media .media-img{ flex:0 0 auto; }
.df-modal .df-media .media-text{ flex:1 1 auto; }
.df-modal .df-media .media-img img{ display:block; max-width:180px; height:auto; }