/* DP Mail - ONLYOFFICE document viewer (see office-addon.js). */
.att-card .dpm-of-btn {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; align-self: stretch;
  border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--text);
  padding: 0 10px; font: 500 12.5px/1 var(--font-ui, system-ui, sans-serif); cursor: pointer;
}
.att-card .dpm-of-btn:hover { background: var(--hover, rgba(127,127,127,.08)); }
.att-card .dpm-of-btn svg { flex: none; color: var(--accent, #1d4ed8); }
html.dpm-compact .att-card .dpm-of-btn span { display: none; }
@media (pointer: coarse) { html.dpm-compact .att-card .dpm-of-btn span, html.dpm-m .att-card .dpm-of-btn span { display: inline !important; } }

html.dpm-of-open body { overflow: hidden; }
.dpm-of { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--bg, #fff); color: var(--text, #0f1a2b); font-family: var(--font-ui, system-ui, sans-serif); }
.dpm-of-bar { display: flex; align-items: center; gap: 2px; flex: none; height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 4px 0; box-sizing: border-box; background: var(--panel, #fff); border-bottom: 1px solid var(--line, #e4e7ec); }
.dpm-of-ttl { flex: 1; min-width: 0; padding: 0 6px; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpm-of-ib { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: inherit; border-radius: 22px; cursor: pointer; flex: none; text-decoration: none; }
.dpm-of-ib:active, .dpm-of-ib:hover { background: var(--hover, #0f1a2b14); }
.dpm-of-body { position: relative; flex: 1; min-height: 0; }
#dpm-of-host, .dpm-of-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dpm-of-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: var(--bg, #fff); font-size: 15px; z-index: 2; }
.dpm-of-msg[hidden] { display: none; }
.dpm-of-msg p { margin: 0; max-width: 460px; line-height: 1.5; }
.dpm-of-msg.bad p { color: var(--bad-fg, #B42318); }
.dpm-of-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line, #d0d5dd); border-top-color: var(--accent, #1d4ed8); animation: dpm-of-r .8s linear infinite; }
@keyframes dpm-of-r { to { transform: rotate(360deg); } }
.dpm-of-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 210; max-width: min(92vw, 520px); background: #0f1a2b; color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 14px; transition: opacity .3s; }
.dpm-of-toast.bad { background: #912018; }
.dpm-of-toast.out { opacity: 0; }

.dpm-of-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; margin: 0 4px; border: 1px solid var(--line, #d0d5dd); border-radius: 17px; background: transparent; color: inherit; font: 600 13px/1 var(--font-ui, system-ui, sans-serif); cursor: pointer; flex: none; white-space: nowrap; }
.dpm-of-pill[hidden] { display: none; }
.dpm-of-pill.primary { background: var(--accent, #1d4ed8); border-color: transparent; color: #fff; }
.dpm-of-pill:disabled { opacity: .6; cursor: default; }
@media (max-width: 400px) { .dpm-of-pill { padding: 0 10px; } .dpm-of-pill:not(.primary) span { display: none; } .dpm-of-pill:not(.primary) { width: 36px; padding: 0; justify-content: center; } }