/* Fokus focused reader (WU2, rebuilt) — the calm "paper letter" reply card.
   Ported faithfully from the /chat/ calm-brief2--reply card Morten designed
   (warm cream sheet + sage accents, kept in BOTH light and dark, never inverted).
   Classes are `efk-` (email-fokus) prefixed and scoped to the reader body so they
   never collide with the email app shell or the chat calm card. The reply runs
   through the REAL /email/ pipeline (AI draft, signature, send), not a copy. */

/* The focused panel owns the actions — hide the standard reply bar + attachments.
   Scoped !important because the reply bar sets its own display:!important. */
#email-reader-content.is-fokus-reader #email-reader-reply,
#email-reader-content.is-fokus-reader #email-reader-attachments { display: none !important; }

/* Let the warm card breathe on the reader surface. */
#email-reader-content.is-fokus-reader #email-reader-body {
  background: transparent;
}

/* Slim header is only used for the "Tilbage til Fokus" bar in the original view.
   In the normal card view it is left EMPTY and collapses (no wasted strip on top);
   the card owns its own close in the corner. */
#email-reader-header.email-reader-header-fokus {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sk-border);
  background: transparent;
}
#email-reader-header.email-reader-header-fokus:empty {
  display: none;
  padding: 0;
  border-bottom: 0;
}
.email-fokus-reader-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--sk-text-secondary);
  cursor: pointer;
}
.email-fokus-reader-close:hover { background: var(--sk-bg-hover); }
.email-fokus-reader-sender {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── The warm letter card shell (calm-brief2 port) ───────────────────────── */
.efk-reply {
  position: relative;
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 20px auto;
  padding: 28px 30px;
  border-radius: 18px;
  background: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.6);
  box-shadow:
    0 1px 2px rgba(92, 77, 67, 0.06),
    0 8px 28px rgba(92, 77, 67, 0.06);
  text-align: left;
  color: #3D3028;
}

/* Quiet close in the card's top-right corner (replaces the old 70px header bar). */
.efk-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #A89B8E;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.efk-close:hover { background: rgba(110, 138, 126, 0.10); color: #5C4D43; }
.efk-close svg { width: 18px; height: 18px; }

.efk-kicker {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6E8A7E;
}

.efk-title {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.18;
  font-weight: 650;
  color: #3A2F26;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.efk-reassure {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: #6E5D50;
}
.efk-reassure:empty { margin: 0; }

/* Subject context chip */
.efk-subject-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 6px 12px;
  font-size: 13px;
  color: #3D3028;
  background: rgba(110, 138, 126, 0.08);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.efk-subject-key {
  font-weight: 600;
  color: #8C7B6F;
}

/* Source-first: who wrote, their quote, and read-aloud of the visible quote */
.efk-source {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: rgba(253, 247, 243, 0.6);
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 14px;
}
.efk-source-from {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3D3028;
}
.efk-source-quote {
  margin: 0 0 12px;
  padding: 0 0 0 12px;
  border-left: 3px solid rgba(110, 138, 126, 0.4);
  font-size: 15px;
  line-height: 1.55;
  color: #3D3028;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.efk-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(110, 138, 126, 0.35);
  background: transparent;
  color: #5C7468;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.efk-listen:hover { background: rgba(110, 138, 126, 0.1); color: #3D3028; }
.efk-listen:disabled { opacity: 0.45; cursor: default; }
.efk-listen:disabled:hover { background: transparent; color: #5C7468; }
.efk-listen.is-playing { background: rgba(110, 138, 126, 0.16); color: #2F5847; }
.efk-ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* ── "Dit svar": the visible, editable reply ─────────────────────────────── */
.efk-task {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(228, 220, 212, 0.6);
}
.efk-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.efk-answer-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8C7B6F;
}
/* Improve-with-AI opener — soft-sage action pill (opens the full compose-sofia). */
.efk-revise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(110, 138, 126, 0.45);
  background: rgba(110, 138, 126, 0.14);
  color: #3D6B57;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.efk-revise:hover {
  background: rgba(110, 138, 126, 0.22);
  border-color: rgba(110, 138, 126, 0.55);
  color: #2F5847;
}

.efk-field { margin-bottom: 12px; }
.efk-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8C7B6F;
}

.efk-letter {
  display: block;
  min-height: 1.5em;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #3D3028;
  background: rgba(253, 247, 243, 0.5);
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 12px;
  overflow-wrap: anywhere;
}
/* "Fra" sender picker — a native <select> dressed as a calm letter field. */
.efk-from-wrap { position: relative; }
.efk-letter--from {
  width: 100%;
  color: #3D3028;
  font-family: inherit;
  padding-right: 40px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.efk-letter--from:hover { border-color: rgba(228, 220, 212, 0.95); }
.efk-from-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  color: #8C7B6F;
}
.efk-from-chevron svg { width: 16px; height: 16px; }
.efk-letter--body {
  min-height: 130px;
  padding: 16px 18px;
}
.efk-letter--body p { margin: 1em 0; }
.efk-letter--body p:first-child { margin-top: 0; }
.efk-letter--body p:last-child { margin-bottom: 0; }
.efk-letter--body ul,
.efk-letter--body ol { margin: 0.5em 0; padding-left: 1.5em; }
.efk-letter:empty::before {
  content: attr(data-placeholder);
  color: #8C7B6F;
  opacity: 0.7;
}
.efk-letter--body [data-efk-body] { min-height: 96px; outline: none; }
.efk-letter--body [data-efk-body]:empty::before {
  content: attr(data-placeholder);
  color: #8C7B6F;
  opacity: 0.7;
}
/* Inline signature footer inside the Besked field (muted, not editable chrome). */
.efk-sig-preview {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(228, 220, 212, 0.9);
  font-size: 13.5px;
  line-height: 1.5;
  color: #8C7B6F;
}
.efk-sig-preview:empty { display: none; }
.efk-sig-preview .email-signature { color: #8C7B6F; }

/* Body head: label + "Læs dit svar op" */
.efk-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.efk-body-head .efk-field-label { margin-bottom: 0; }

/* Skeleton while the AI draft loads */
.efk-letter--loading { cursor: default; }
.efk-letter--loading .efk-skel-line {
  display: block;
  height: 0.72em;
  margin: 0 0 0.66em;
  border-radius: 6px;
  background-color: rgba(228, 220, 212, 0.6);
  background-image: linear-gradient(
    90deg,
    rgba(228, 220, 212, 0) 0%,
    rgba(253, 247, 243, 0.9) 50%,
    rgba(228, 220, 212, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 180% 100%;
  animation: efk-skel-shimmer 1.5s ease-in-out infinite;
}
.efk-letter--loading .efk-skel-line:first-child { margin-top: 3px; }
.efk-letter--loading .efk-skel-line:nth-child(1) { width: 94%; }
.efk-letter--loading .efk-skel-line:nth-child(2) { width: 82%; }
.efk-letter--loading .efk-skel-line:nth-child(3) { width: 64%; }
@keyframes efk-skel-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

/* Status region */
.efk-status { }
.efk-sent {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #6E8A7E;
}
.efk-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #9B6050;
  background: rgba(155, 96, 80, 0.08);
  border: 1px solid rgba(155, 96, 80, 0.2);
  border-radius: 10px;
}

/* Actions */
.efk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.efk-send {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  background: #6E8A7E;
  color: #FFFFFF;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
}
.efk-send:hover:not([disabled]) { background: color-mix(in srgb, #6E8A7E 88%, black); }
.efk-send[disabled] { opacity: 0.55; cursor: not-allowed; }
/* "Senere" is the quiet third action — a calm text button, grouped with the others
   (no far-right float, which read as detached / tacked-on). */
.efk-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  border: none;
  background: transparent;
  color: #8C7B6F;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 10px;
}
.efk-quiet:hover { color: #5C7468; }

/* Vis original toggle (quiet sage text under the source) */
.efk-original-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px 0;
  border: none;
  background: transparent;
  color: #4A7A68;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.efk-original-toggle:hover { color: #2F5847; text-decoration: underline; }
.efk-original-back {
  display: inline-flex;
  align-items: center;
  margin: 12px 0 0 14px;
  padding: 6px 14px;
  border: 1px solid var(--sk-border);
  border-radius: 12px;
  background: transparent;
  color: var(--sk-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* Focus rings: sage #6E8A7E */
.efk-listen:focus-visible,
.efk-revise:focus-visible,
.efk-send:focus-visible,
.efk-close:focus-visible,
.efk-quiet:focus-visible,
.efk-original-toggle:focus-visible,
.email-fokus-reader-close:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}
/* The card receives focus programmatically when it opens (so AT lands on it); that
   is not a keyboard-tab, so it must not paint a focus ring around the whole card. */
.efk-reply:focus { outline: none; }
/* Editable letter fields keep neutral chrome on focus (caret is enough). */
.efk-letter:focus-visible,
.efk-letter--body:focus-within {
  outline: none;
  box-shadow: none;
  border-color: rgba(228, 220, 212, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .efk-letter--loading .efk-skel-line { animation: none; }
}

/* Responsive */
@media (max-width: 720px) {
  .efk-reply { padding: 22px 20px; margin: 14px auto; }
  .efk-actions { flex-direction: column; align-items: stretch; }
  .efk-send { width: 100%; justify-content: center; }
  .efk-quiet { margin-left: 0; justify-content: center; }
}
@media (max-width: 360px) {
  .efk-reply { padding: 18px 16px; }
  .efk-subject-chip { white-space: normal; }
  .efk-answer-head { align-items: flex-start; }
}