/* drafts.js: a draft card in the chat, and the draft over the whole screen
 * (expanded.js's dialog). The card is uicards.css's quiet card, all of it one
 * button. The full view shows the draft as its reader sees it: an email's
 * header rows over the template's frame (white, as a mail client), a Slack
 * message, a WhatsApp bubble, a document on a page. The WhatsApp colours are
 * WhatsApp's own (what the reader sees), kept here and nowhere else. */

/* ---- the card ---- */
.ui-card.ui-draft { padding: 0; width: min(100%, 34rem); }
.ui-draft-open {
  display: grid;
  gap: var(--sv-space-1);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--sv-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--sv-dur-instant) var(--sv-ease-out);
}
.ui-draft-open:hover { background: var(--sv-fill-2); }
.ui-draft-open:active { background: var(--sv-fill-3); }
.ui-draft-open:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
.ui-draft-kind { display: flex; align-items: center; gap: var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.ui-draft-kind .icon { flex: none; width: 14px; height: 14px; }
.ui-draft-go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--sv-ink-secondary); }
.ui-draft-go .icon { width: 14px; height: 14px; }
.ui-draft-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-draft-meta { color: var(--sv-ink-secondary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-draft-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--sv-ink-secondary);
  overflow-wrap: anywhere;
}

/* ---- the full view: actions in the dialog's bar ---- */
.md-pv-full > .md-pv-bar .draft-act { display: inline-flex; align-items: center; gap: var(--sv-space-1); }
.md-pv-full > .md-pv-bar .draft-act .icon { width: 14px; height: 14px; }
.md-pv-full > .md-pv-bar button.draft-send { background: var(--sv-ink); color: var(--sv-surface); padding: 0 var(--sv-space-3); }
.md-pv-full > .md-pv-bar button.draft-send:hover:not(:disabled) { background: var(--sv-ink); color: var(--sv-surface); opacity: 0.85; }
.md-pv-full > .md-pv-bar:has(.draft-act) { gap: var(--sv-space-1); }
/* The actions sit at the right with Close (tables.css pushes Close right on its own). */
.md-pv-full > .md-pv-bar .draft-act:first-of-type { margin-left: auto; }
.md-pv-full > .md-pv-bar:has(.draft-act) .md-pv-close { margin-left: var(--sv-space-2); }
@media (max-width: 760px) {
  .md-pv-full > .md-pv-bar:has(.draft-act) button { min-height: 44px; min-width: 44px; justify-content: center; }
}

.draft-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--sv-surface-sunken); overflow: auto; }

/* email: the header a mail client shows, then the template's frame */
.draft-email { overflow: hidden; }
.draft-mail-head {
  flex: none;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--sv-space-4) var(--sv-space-4) var(--sv-space-3);
}
.draft-mail-subject { margin: 0 0 var(--sv-space-2); font-size: 1.25rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.draft-mail-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--sv-space-3); margin: 0; font-size: var(--ui-meta); }
.draft-mail-rows dt { color: var(--sv-ink-tertiary); }
.draft-mail-rows dd { margin: 0; color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
/* White as a mail client's reading pane, the text inset like the header's. */
.draft-mail-body { flex: 1; min-height: 0; display: flex; width: 100%; max-width: 60rem; margin: 0 auto; box-sizing: border-box; padding: var(--sv-space-2) var(--sv-space-4) 0; border-top: var(--sv-hairline-w) solid var(--sv-hairline); background: #fff; }
.draft-mail-body > iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.draft-mail-text { flex: 1; margin: 0; padding: var(--sv-space-4); overflow: auto; color: #2b3033; font: 14px/1.5 Arial, sans-serif; white-space: pre-wrap; }

/* Slack and WhatsApp: the message where its reader sees it */
.draft-app { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 48rem; margin: 0 auto; background: var(--sv-surface); }
.draft-app-bar { flex: none; display: flex; align-items: center; gap: var(--sv-space-2); padding: var(--sv-space-3) var(--sv-space-4); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); font-weight: 600; }
.draft-app-bar .icon { width: 16px; height: 16px; color: var(--sv-ink-secondary); }
.draft-thread { flex: 1; padding: var(--sv-space-4); }
.draft-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.draft-quote { margin: var(--sv-space-1) 0; padding-left: var(--sv-space-3); border-left: 4px solid var(--sv-hairline); color: var(--sv-ink-secondary); }
.draft-pre { margin: var(--sv-space-1) 0; padding: var(--sv-space-2) var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-sunken); font: 0.8125rem/1.45 var(--sv-font-mono); white-space: pre-wrap; }
.draft-code { padding: 1px 4px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 3px; background: var(--sv-surface-sunken); font: 0.85em var(--sv-font-mono); }
.draft-link { color: inherit; text-decoration: underline; }
.draft-time { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 400; }

.draft-slack-msg { display: flex; gap: var(--sv-space-3); align-items: flex-start; }
.draft-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: var(--sv-ink); color: var(--sv-surface); font-weight: 600; font-size: 0.875rem; }
.draft-slack-col { flex: 1; min-width: 0; }
.draft-slack-head { display: flex; align-items: baseline; gap: var(--sv-space-2); margin-bottom: 2px; }

.draft-whatsapp .draft-app { --wa-wall: #efeae2; --wa-out: #d9fdd3; --wa-ink: #111b21; --wa-meta: #667781; }
html.theme-dark .draft-whatsapp .draft-app { --wa-wall: #0b141a; --wa-out: #005c4b; --wa-ink: #e9edef; --wa-meta: #8696a0; }
.draft-whatsapp .draft-thread { display: flex; flex-direction: column; align-items: flex-end; background: var(--wa-wall); }
.draft-bubble { max-width: min(85%, 34rem); padding: 6px 8px 8px 10px; border-radius: 8px 0 8px 8px; background: var(--wa-out); color: var(--wa-ink); box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13); }
.draft-bubble .draft-time { display: block; margin-top: 2px; text-align: right; color: var(--wa-meta); font-size: 0.6875rem; }
.draft-bubble .draft-quote { color: inherit; opacity: 0.8; }

/* a document on a page */
.draft-page { width: 100%; max-width: 46rem; box-sizing: border-box; margin: var(--sv-space-6) auto; padding: var(--sv-space-8); background: var(--sv-surface); border: var(--sv-hairline-w) solid var(--sv-hairline); }
.draft-doc-title { margin: 0 0 var(--sv-space-4); font-size: 1.75rem; line-height: 1.2; font-weight: 600; }
@media (max-width: 640px) {
  .draft-page { margin: 0; padding: var(--sv-space-4); border: 0; min-height: 100%; }
  .draft-mail-head { padding: var(--sv-space-3); }
  .draft-mail-body { padding: var(--sv-space-2) var(--sv-space-3) 0; }
  .draft-thread { padding: var(--sv-space-3); }
}