/* DP Mail - attachment hover preview card. Uses the app's theme variables so it
   follows whichever theme is selected (including Midnight). */
.dpm-ap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 85;                       /* above the page, below dialogs and menus */
  width: 400px;
  box-sizing: border-box;
  background: var(--panel, #fff);
  color: var(--text, #1d232b);
  border: 1px solid var(--line, #e1e6ed);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .08);
  font: 13px/1.4 var(--font-ui, system-ui, sans-serif);
  overflow: hidden;
  pointer-events: none;              /* never intercepts clicks */
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.dpm-ap.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s;
}
.dpm-ap.k-image { width: auto; min-width: 240px; max-width: 420px; }
.dpm-ap.is-loading, .dpm-ap.is-error { width: 300px; }

.dpm-ap-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line, #e1e6ed);
}
.dpm-ap-ext {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 4px;
  border-radius: 5px;
  background: var(--accent, #1f5aa6);
  color: var(--accent-text, #fff);
  font: 700 10px/1 var(--font-mono, ui-monospace, monospace);
  text-align: center;
  letter-spacing: .02em;
}
.dpm-ap-title { display: flex; flex-direction: column; min-width: 0; }
.dpm-ap-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dpm-ap-meta { font-size: 12px; color: var(--muted, #566376); }

.dpm-ap-body {
  max-height: 300px;
  overflow: hidden;
  background: var(--surface, #f4f6f9);
  display: flex;
  justify-content: center;
}
.dpm-ap-img { display: block; max-width: 100%; max-height: 300px; object-fit: contain; background:
  conic-gradient(#0000000f 25%, #0000 0 50%, #0000000f 0 75%, #0000 0) 0 0 / 14px 14px; }
.dpm-ap-pdf { display: block; max-width: 100%; height: auto; background: #fff; }
.dpm-ap-doc { display: block; width: 100%; height: 300px; border: 0; background: #fff; }
.dpm-ap-text {
  margin: 0;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  max-height: 300px;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.45 var(--font-mono, ui-monospace, monospace);
  background: var(--panel, #fff);
}
.dpm-ap-sheet { width: 100%; overflow: hidden; background: var(--panel, #fff); }
.dpm-ap-tbl { border-collapse: collapse; font-size: 11.5px; width: 100%; table-layout: fixed; }
.dpm-ap-tbl th, .dpm-ap-tbl td {
  border: 1px solid var(--line, #e1e6ed);
  padding: 3px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.dpm-ap-tbl th { background: var(--soft, #eef3fa); color: var(--muted, #566376); font-weight: 600; text-align: center; }
.dpm-ap-tbl thead th:first-child, .dpm-ap-tbl tbody th { width: 30px; }
.dpm-ap-tbl td.num { text-align: right; }

.dpm-ap-status { padding: 14px 12px; color: var(--muted, #566376); }
.dpm-ap.is-error .dpm-ap-status { color: var(--bad-fg, #b42318); }
.dpm-ap.is-loading .dpm-ap-body, .dpm-ap.is-error .dpm-ap-body { background: transparent; display: block; }
.dpm-ap.is-loading .dpm-ap-head, .dpm-ap.is-error .dpm-ap-head { border-bottom: 0; padding-bottom: 0; }
.dpm-ap.is-loading .dpm-ap-ext, .dpm-ap.is-error .dpm-ap-ext { display: none; }

.dpm-ap-foot {
  padding: 6px 12px;
  border-top: 1px solid var(--line, #e1e6ed);
  font-size: 11.5px;
  color: var(--muted, #566376);
}
.dpm-ap-foot:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dpm-ap, .dpm-ap.is-on { transition: none; transform: none; }
}
@media (hover: none), (pointer: coarse) {
  .dpm-ap { display: none; }         /* touch screens have no hover */
}