/* Meddelanden · Det som behöver dig (nov 2026, js/meddelanden-fokus.js, admin CHANGELOG-meddelanden-steg1.md).
   Stilla: informationen i ord, en lugn kolumn. Det inkomna står på en egen yta, svaret på myceons yta — man ser alltid
   var meddelandet slutar och utkastet börjar. Bara myceons tokens och temats roller, så vyn följer temat och Original. */

/* Vyn tar Meddelandens yta under flikraden; listan och tråden finns kvar under (tråden öppnas i bakgrunden). */
.mf-on > :not(.nya-subnav):not(.mf-root) { display: none !important; }
.mf-root { display: none; }
.mf-on > .mf-root { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; background: var(--bg-base); color: var(--text-primary); }

.mf-wrap { max-width: 760px; margin: 0 auto; padding: calc(28px * var(--t-space, 1)) calc(24px * var(--t-space, 1)) calc(64px * var(--t-space, 1)); animation: mf-enter 240ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mf-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mf-wrap { animation: none; } }

.mf-top { display: flex; align-items: baseline; gap: calc(12px * var(--t-space, 1)); }
.mf-top-r { margin-left: auto; display: flex; gap: calc(14px * var(--t-space, 1)); }
.mf-kicker { margin: 0 0 calc(12px * var(--t-space, 1)); font-size: calc(12.5px * var(--t-text-scale, 1)); letter-spacing: .02em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mf-h { margin: 0 0 calc(18px * var(--t-space, 1)); font-size: calc(22px * var(--t-text-scale, 1)); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.mf-quiet { margin: calc(6px * var(--t-space, 1)) 0; font-size: calc(13px * var(--t-text-scale, 1)); color: var(--text-muted); }

/* Ord som går att trycka på: understrykningen kommer först vid hovring (latent). */
.mf-ord, .mf-link { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 160ms; }
.mf-ord:hover, .mf-ord:focus-visible, .mf-ord.is-on { text-decoration-color: var(--accent); }
.mf-ord.is-on { color: var(--accent); }
.mf-link { color: var(--text-secondary); text-decoration-color: currentColor; font-size: calc(13px * var(--t-text-scale, 1)); }
.mf-link:hover { color: var(--text-primary); }
.mf-ord:focus-visible, .mf-link:focus-visible, .mf-btn:focus-visible, .mf-tone:focus-visible, .mf-ov-row:focus-visible, .mf-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: calc(6px * var(--t-radius, 1)); }

/* Det inkomna: en egen, lugn yta. */
.mf-in { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: calc(14px * var(--t-radius, 1)); padding: calc(18px * var(--t-space, 1)) calc(22px * var(--t-space, 1)); box-shadow: 0 1px 2px color-mix(in srgb, var(--t-shadow, rgb(0 0 0)) calc(6% * var(--t-depth, 1)), transparent); }
.mf-in-h { display: grid; gap: calc(4px * var(--t-space, 1)); margin-bottom: calc(12px * var(--t-space, 1)); font-size: calc(13.5px * var(--t-text-scale, 1)); }
.mf-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(6px * var(--t-space, 1)); font-size: calc(15px * var(--t-text-scale, 1)); }
.mf-from .mf-ord { font-weight: 600; }
.mf-co { color: var(--text-secondary); }
.mf-addr { color: var(--text-muted); font-size: calc(13px * var(--t-text-scale, 1)); }
.mf-when { margin-left: auto; color: var(--text-muted); font-size: calc(12.5px * var(--t-text-scale, 1)); font-variant-numeric: tabular-nums; }
.mf-subj { font-weight: 600; margin-top: calc(2px * var(--t-space, 1)); }
.mf-rcpt { display: grid; grid-template-columns: 56px 1fr; gap: calc(8px * var(--t-space, 1)); font-size: calc(13px * var(--t-text-scale, 1)); color: var(--text-secondary); }
.mf-rl { color: var(--text-muted); }

.mf-earlier { list-style: none; margin: 0 0 calc(12px * var(--t-space, 1)); padding: 0 0 calc(10px * var(--t-space, 1)); border-bottom: 1px solid var(--border-default); display: grid; gap: calc(4px * var(--t-space, 1)); font-size: calc(13px * var(--t-text-scale, 1)); color: var(--text-secondary); }
.mf-e-who { font-weight: 600; color: var(--text-primary); }
.mf-e-when { color: var(--text-muted); }
.mf-sum { margin: 0 0 calc(12px * var(--t-space, 1)); padding: calc(10px * var(--t-space, 1)) calc(12px * var(--t-space, 1)); border-radius: calc(10px * var(--t-radius, 1)); background: var(--ai-surface); color: var(--text-primary); font-size: calc(13.5px * var(--t-text-scale, 1)); line-height: 1.5; }

/* Brevet läses i läsrollen (temats --font-reading; utan tema brödtextens typsnitt). */
.mf-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-reading, inherit); font-size: var(--reading-size, calc(15px * var(--t-text-scale, 1))); line-height: var(--reading-leading, 1.6); color: var(--text-primary); }
.mf-files { margin-top: calc(14px * var(--t-space, 1)); }

/* Kontaktkortet på plats, under raden man tryckte på. */
.mf-card { margin: calc(6px * var(--t-space, 1)) 0 calc(8px * var(--t-space, 1)); padding: calc(12px * var(--t-space, 1)) calc(14px * var(--t-space, 1)); border-radius: calc(12px * var(--t-radius, 1)); background: var(--bg-inset); border: 1px solid var(--border-default); font-size: calc(13.5px * var(--t-text-scale, 1)); }
.mf-card-story { margin: 0 0 calc(8px * var(--t-space, 1)); font-family: var(--font-reading, inherit); line-height: 1.5; }
.mf-card-ways { display: flex; flex-wrap: wrap; gap: calc(6px * var(--t-space, 1)); margin: calc(6px * var(--t-space, 1)) 0 calc(10px * var(--t-space, 1)); }
.mf-card-dl { display: grid; grid-template-columns: 88px 1fr; gap: calc(3px * var(--t-space, 1)) calc(10px * var(--t-space, 1)); margin: 0 0 calc(8px * var(--t-space, 1)); }
.mf-card-dl dt { color: var(--text-muted); }
.mf-card-dl dd { margin: 0; }

/* En kollegas tråd. */
.mf-note { margin-top: calc(14px * var(--t-space, 1)); padding: calc(12px * var(--t-space, 1)) calc(16px * var(--t-space, 1)); border-radius: calc(12px * var(--t-radius, 1)); background: var(--ai-surface); font-size: calc(14px * var(--t-text-scale, 1)); }
.mf-note p { margin: 0 0 calc(8px * var(--t-space, 1)); }

/* Ditt svar: myceons yta när utkastet kommer från myceon. */
.mf-reply { margin-top: calc(18px * var(--t-space, 1)); padding: calc(16px * var(--t-space, 1)) calc(20px * var(--t-space, 1)); border-radius: calc(14px * var(--t-radius, 1)); border: 1px solid var(--border-default); background: var(--bg-surface); }
.mf-reply.ai-draft { background: var(--ai-surface); border-color: color-mix(in srgb, var(--ai-text) 22%, transparent); }
.mf-reply-h { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10px * var(--t-space, 1)); margin: 0 0 calc(10px * var(--t-space, 1)); font-size: calc(14px * var(--t-text-scale, 1)); }
.mf-reply .ai-label { font-size: calc(12px * var(--t-text-scale, 1)); color: var(--ai-text); letter-spacing: .02em; }
.mf-tones { margin-left: auto; display: flex; gap: calc(2px * var(--t-space, 1)); }
.mf-tone { border: 0; background: transparent; padding: calc(4px * var(--t-space, 1)) calc(8px * var(--t-space, 1)); border-radius: calc(8px * var(--t-radius, 1)); font: inherit; font-size: calc(12.5px * var(--t-text-scale, 1)); color: var(--text-secondary); cursor: pointer; }
.mf-tone:hover { background: var(--bg-hover); color: var(--text-primary); }
.mf-reply .mf-rcpt { margin-bottom: calc(4px * var(--t-space, 1)); }
.mf-text { display: block; inline-size: 100%; box-sizing: border-box; min-height: 9em; margin: calc(8px * var(--t-space, 1)) 0 0; padding: calc(12px * var(--t-space, 1)) calc(14px * var(--t-space, 1)); resize: vertical;
  border: 1px solid var(--border-default); border-radius: calc(10px * var(--t-radius, 1)); background: var(--bg-surface); color: var(--text-primary);
  font-family: var(--font-reading, inherit); font-size: calc(15px * var(--t-text-scale, 1)); line-height: 1.6; }
.mf-text[aria-busy="true"] { opacity: .6; }
.mf-gaps { margin-top: calc(8px * var(--t-space, 1)); }
.mf-gaps .ai-gap { margin: 0; padding: calc(8px * var(--t-space, 1)) calc(12px * var(--t-space, 1)); border-radius: calc(10px * var(--t-radius, 1)); background: var(--gap-surface); color: var(--gap-text); font-size: calc(13.5px * var(--t-text-scale, 1)); line-height: 1.5; }
.mf-hint { margin: calc(8px * var(--t-space, 1)) 0 0; font-size: calc(12.5px * var(--t-text-scale, 1)); color: var(--text-muted); }

.mf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--t-space, 1)); margin-top: calc(14px * var(--t-space, 1)); }
.mf-send { justify-content: flex-end; }
.mf-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 calc(14px * var(--t-space, 1)); border-radius: calc(9px * var(--t-radius, 1)); border: 1px solid var(--border-default); background: var(--bg-surface);
  font: inherit; font-size: calc(13.5px * var(--t-text-scale, 1)); color: var(--text-primary); cursor: pointer; text-decoration: none; }
.mf-btn:hover { background: var(--bg-hover); }
.mf-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--t-on-strong, #fff); }
.mf-btn.is-primary:hover { filter: brightness(1.05); }
.mf-btn:disabled { opacity: .5; cursor: not-allowed; }
.mf-keys { margin: calc(22px * var(--t-space, 1)) 0 0; font-size: calc(12px * var(--t-text-scale, 1)); color: var(--text-muted); text-align: center; }
.mf-keys kbd { font-family: inherit; font-size: .95em; padding: 0 calc(4px * var(--t-space, 1)); border: 1px solid var(--border-default); border-radius: calc(4px * var(--t-radius, 1)); }

/* Överblicken. */
.mf-ov-list { list-style: none; margin: 0 0 calc(10px * var(--t-space, 1)); padding: 0; border-top: 1px solid var(--border-default); }
.mf-ov-list li { border-bottom: 1px solid var(--border-default); }
.mf-ov-row { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: calc(14px * var(--t-space, 1)); inline-size: 100%; padding: calc(12px * var(--t-space, 1)) calc(6px * var(--t-space, 1)); border: 0; background: transparent; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.mf-ov-row:hover { background: var(--bg-hover); }
.mf-ov-who { font-weight: 600; font-size: calc(14px * var(--t-text-scale, 1)); }
.mf-ov-who .mf-co { font-weight: 400; }
.mf-ov-why { font-size: calc(14px * var(--t-text-scale, 1)); color: var(--text-secondary); }
@media (max-width: 640px) { .mf-ov-row { grid-template-columns: 1fr; gap: calc(2px * var(--t-space, 1)); } .mf-wrap { padding-inline: calc(14px * var(--t-space, 1)); } }

.mf-took { margin: calc(22px * var(--t-space, 1)) 0 0; font-size: calc(13px * var(--t-text-scale, 1)); color: var(--text-secondary); }
.mf-dot { display: inline-block; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ai-text); vertical-align: middle; margin-right: 4px; }
.mf-empty .mf-h { margin-top: calc(40px * var(--t-space, 1)); }

.mf-toast { position: fixed; bottom: calc(20px * var(--t-space, 1)); left: 50%; transform: translateX(-50%); inline-size: max-content; max-inline-size: calc(100% - 32px); padding: calc(10px * var(--t-space, 1)) calc(16px * var(--t-space, 1)); border-radius: calc(10px * var(--t-radius, 1));
  background: var(--text-primary); color: var(--bg-surface); font-size: calc(13.5px * var(--t-text-scale, 1)); box-shadow: var(--shadow-lg); z-index: 9000; }
.mf-toast .mf-link { color: inherit; font-weight: 600; margin-left: 8px; }
.mf-toast[hidden] { display: none; }