/* D47 Neue Mail -- one calm compose surface in Ghost's own language (tokens.css): night glass, hairline
   rows, the single lit cyan action. Phone: a full-screen sheet that keeps the primary action above the
   keyboard (visualViewport, mailCompose.js). Desktop: a dialog over the scene with a scrim. Nothing here
   introduces a new colour, font or radius. Everything wraps; nothing can widen the viewport. */

.compose-backdrop {
  position: fixed;
  inset: 0;
  z-index: 64;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity var(--dur-2) var(--ease-out);
}

.compose {
  --compose-pad: var(--s-4);
  position: fixed;
  /* Above the top bar, the dock and a contact ping (60); below the media lightbox (1000). */
  z-index: 65;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--ink-1);
  background: linear-gradient(180deg, rgba(14, 28, 52, 0.94), rgba(6, 13, 26, 0.98));
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--highlight-top), inset 0 0 0 1px var(--hairline), var(--shadow-3);
  overflow: hidden;
}

.compose.hidden,
.compose-backdrop.hidden {
  display: none;
}

html.compose-open,
html.compose-open body {
  overflow: hidden;
}

/* --- head ------------------------------------------------------------------------------------ */

.compose__bar {
  display: grid;
  grid-template-columns: var(--touch) 1fr auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  flex: none;
}

.compose__close {
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}

.compose__title {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-align: center;
}

.compose__discard {
  color: var(--ink-3);
  min-width: var(--touch);
}

/* --- form body --------------------------------------------------------------------------------- */

.compose__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
}

.compose__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--compose-pad) var(--s-4);
  -webkit-overflow-scrolling: touch;
}

.compose-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.25rem;
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}

.compose-row__label {
  flex: none;
  width: 3.75rem;
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.compose-from {
  flex: 1;
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
  padding: var(--s-2) 0;
}

/* Inputs inside rows are borderless: the row's hairline is the field. 16px text = no iOS zoom. */
.compose-input,
.recipient-input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-1);
  font: inherit;
  font-size: max(16px, var(--fs-body));
  outline: none;
  box-shadow: none;
}

.compose-input:focus-visible,
.recipient-input:focus-visible {
  /* The row's lit hairline is the focus indicator (see .compose-row:focus-within). */
  background: transparent;
  box-shadow: none;
}

.compose-input::placeholder,
.recipient-input::placeholder,
.compose-body__text::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.compose-row:focus-within {
  border-bottom-color: var(--light-cyan);
  box-shadow: 0 1px 0 var(--light-cyan);
}

/* --- recipients ----------------------------------------------------------------------------------- */

.compose-row--recipients {
  align-items: flex-start;
  padding: 0.25rem 0;
}

.compose-row--recipients .compose-row__label {
  padding-top: 0.85rem;
}

.recipient-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
}

.recipient-chips {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.recipient-field .recipient-input {
  flex: 1 1 8rem;
}

.recipient-field[data-full='true'] .recipient-input {
  display: none;
}

/* A chip shows the name AND the full address (the owner checks the address, it is never truncated). */
.recipient-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 2.5rem;
  gap: 0.15rem;
  padding: 0.2rem 0 0.2rem 0.75rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font-size: var(--fs-small);
  line-height: 1.25;
}

.recipient-chip__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.recipient-chip__addr {
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

/* The visible ✕ is small; the button keeps a 44pt hit area that overlaps the chip's own height. */
.recipient-chip__remove {
  position: relative;
  flex: none;
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
}

.recipient-chip__remove::after {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

.recipient-chip__remove .icon {
  width: 14px;
  height: 14px;
}

.compose-ccbcc-toggle {
  flex: none;
  min-height: var(--touch);
  padding: 0 var(--s-3);
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.compose-ccbcc-toggle[aria-expanded='true'] {
  color: var(--light-cyan);
}

.compose-ccbcc[hidden] {
  display: none;
}

.compose-recipient-note {
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

/* Suggestions: one listbox, placed under the active recipient row by mailCompose.js. */
.compose-suggest {
  position: absolute;
  z-index: 3;
  left: var(--compose-pad);
  right: var(--compose-pad);
  max-height: min(18rem, 46dvh);
  overflow-y: auto;
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(18, 34, 62, 0.98), rgba(9, 18, 34, 0.99));
  box-shadow: inset 0 0 0 1px var(--hairline-strong), inset 0 1px 0 var(--highlight-top), var(--shadow-2);
}

.compose-suggest[hidden] {
  display: none;
}

.compose-suggest__option {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'name source' 'addr source';
  align-items: center;
  column-gap: var(--s-3);
  min-height: var(--touch);
  padding: 0.45rem var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.compose-suggest__option[aria-selected='true'],
.compose-suggest__option:hover {
  background: var(--surface-2);
}

.compose-suggest__name {
  grid-area: name;
  min-width: 0;
  overflow-wrap: anywhere;
}

.compose-suggest__addr {
  grid-area: addr;
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.compose-suggest__source {
  grid-area: source;
  color: var(--ink-3);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.compose-suggest__empty {
  padding: var(--s-3);
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.compose-suggest__connect {
  display: block;
  padding: var(--s-2) var(--s-3) var(--s-1);
  color: var(--light-cyan);
  font-size: var(--fs-caption);
}

/* --- AI help -------------------------------------------------------------------------------------- */

.compose-ai {
  padding: var(--s-3) 0 0;
}

.compose-ai__toggle {
  min-height: var(--touch);
  padding: 0 var(--s-4) 0 var(--s-3);
  background: rgba(var(--light-violet-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--light-violet-rgb), 0.28);
  color: var(--ink-1);
  font-size: var(--fs-small);
}

.compose-ai__toggle .icon {
  color: var(--light-violet);
}

.compose-ai__toggle[aria-expanded='true'] {
  background: rgba(var(--light-violet-rgb), 0.16);
}

.compose-ai__panel {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: 0.25rem 0.25rem 0.25rem var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  min-width: 0;
}

.compose-ai__panel[hidden] {
  display: none;
}

.compose-ai__run {
  flex: none;
  font-size: var(--fs-small);
}

.compose[data-ai-busy='true'] .compose-ai__run {
  opacity: 0.6;
  pointer-events: none;
}

.compose-ai__note {
  margin: var(--s-2) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.compose-ai__note button {
  min-height: 2rem;
  margin-left: var(--s-2);
  padding: 0 var(--s-3);
  font-size: var(--fs-small);
}

.compose-ai__note[hidden] {
  display: none;
}

/* --- body --------------------------------------------------------------------------------------- */

.compose-body {
  padding-top: var(--s-3);
}

.compose-body__text {
  display: block;
  width: 100%;
  min-height: 12rem;
  padding: var(--s-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-1);
  font: inherit;
  font-size: max(16px, var(--fs-body));
  line-height: var(--lh-body);
  resize: none;
  outline: none;
  overflow-wrap: anywhere;
}

.compose-body__text:focus-visible {
  background: transparent;
  box-shadow: none;
}

.compose-hint {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.compose-error {
  margin: var(--s-1) 0 0;
  color: var(--error);
  font-size: var(--fs-small);
}

.compose-error[hidden] {
  display: none;
}

/* --- attachments -------------------------------------------------------------------------------- */

.compose-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
}

.compose-files:empty {
  display: none;
}

.compose-file {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  min-height: 3rem;
  padding: 0.35rem 0.25rem 0.35rem var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  min-width: 0;
}

.compose-file .icon {
  flex: none;
  color: var(--ink-2);
}

.compose-file__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.compose-file__name {
  font-size: var(--fs-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-file__sub {
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.compose-file[data-status='error'] .compose-file__sub {
  color: var(--error);
}

.compose-file__remove {
  flex: none;
  width: var(--touch);
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
}

/* Drag & drop (desktop): the whole sheet is the drop target; this layer only says so. */
.compose-drop {
  display: none;
}

.compose[data-dragging='true'] .compose-drop {
  position: absolute;
  inset: var(--s-3);
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: rgba(var(--light-cyan-rgb), 0.08);
  box-shadow: inset 0 0 0 2px rgba(var(--light-cyan-rgb), 0.5);
  color: var(--ink-1);
  font-weight: 500;
  pointer-events: none;
}

/* --- footer: the one lit action ------------------------------------------------------------------- */

.compose__footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--compose-pad) calc(var(--s-3) + var(--compose-safe-bottom, 0px));
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(8, 17, 31, 0.6), rgba(5, 11, 23, 0.92));
}

.compose-attach {
  flex: none;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.compose-status {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.compose-status[data-tone='error'] {
  color: var(--error);
}

.compose-submit {
  flex: none;
  min-width: 8.5rem;
  padding: 0 var(--s-5);
}

.compose[data-busy='true'] .compose-submit {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Desktop mail draft (2026-10-19): sender account, address choice, signature, draft card ---------- */

.compose-status[data-tone='ok'] {
  color: var(--ok);
}

.compose-account {
  flex: 1;
  min-width: 0;
  min-height: var(--touch);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--ink-1);
  font: inherit;
  font-size: max(16px, var(--fs-body));
}

.compose-send-note {
  margin: var(--s-2) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.compose-send-note[data-path='mail_app'] {
  color: var(--ink-2);
}

.compose-send-note[hidden],
.compose-options[hidden],
.compose-signature[hidden],
.compose-account[hidden],
.compose-from[hidden],
.compose-hint[hidden],
.compose-ai[hidden],
.compose-attach[hidden],
.compose-copy[hidden],
.compose-save[hidden] {
  display: none;
}

.compose-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
}

.compose-options__label {
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.compose-options__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.compose-option {
  min-height: var(--touch);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  color: var(--ink-1);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.compose-option[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--light-cyan);
}

.compose-signature {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
}

.compose-signature__label {
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.compose-signature__text {
  width: 100%;
  min-height: 4.5rem;
  padding: var(--s-2) 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-1);
  font: inherit;
  font-size: max(16px, var(--fs-body));
  line-height: var(--lh-body);
  resize: vertical;
}

/* Four footer items no longer fit one phone row: the status line gets its own row above the buttons. */
.compose__footer {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.compose__footer .compose-status {
  flex: 1 1 100%;
  order: -1;
}

.compose__footer .compose-status:empty {
  display: none;
}

.compose__footer .compose-attach {
  margin-right: auto;
}

.compose-copy,
.compose-save {
  flex: none;
}

.mail-draft-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  max-width: min(440px, 100%);
  margin: var(--s-2) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-sizing: border-box;
}

.mail-draft-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.mail-draft-card__title {
  color: var(--ink-1);
  font-weight: 600;
}

.mail-draft-card__status {
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.mail-draft-card__facts {
  display: grid;
  gap: var(--s-1);
  margin: 0;
}

.mail-draft-card__row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--s-2);
  font-size: var(--fs-small);
}

.mail-draft-card__row dt {
  color: var(--ink-3);
}

.mail-draft-card__row dd {
  margin: 0;
  color: var(--ink-1);
  overflow-wrap: anywhere;
}

.mail-draft-card__note {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.mail-draft-card__open {
  align-self: flex-start;
  min-height: var(--touch);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  color: var(--ink-1);
  font-weight: 600;
}

/* --- phone: a full-screen sheet ----------------------------------------------------------------- */

@media (max-width: 768px) {
  .compose {
    --compose-safe-bottom: var(--safe-bottom);
    left: 0;
    right: 0;
    top: 0;
    /* mailCompose.js pins the height to the visual viewport, so the footer rides above the keyboard. */
    height: var(--compose-vh, 100dvh);
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    border-radius: 0;
    transform: translateY(var(--compose-offset, 0px));
    animation: compose-rise 420ms var(--spring-snappy) both;
  }

  .compose-backdrop {
    display: none;
  }

  /* The keyboard is up: the safe-area inset below the footer belongs to the keyboard now. */
  .compose[data-keyboard='true'] {
    --compose-safe-bottom: 0px;
  }

  .compose__bar {
    min-height: 3.25rem;
  }

  .compose-drop {
    display: none !important;
  }

  .compose-submit {
    min-width: 0;
    flex: 0 1 auto;
  }
}

/* --- desktop: a dialog over the scene ------------------------------------------------------------ */

@media (min-width: 769px) {
  .compose {
    --compose-pad: var(--s-5);
    left: 50%;
    top: 50%;
    width: min(44rem, calc(100vw - 4rem));
    height: min(48rem, calc(100dvh - 4rem));
    border-radius: var(--r-xl);
    transform: translate(-50%, -50%);
    animation: compose-in var(--dur-3) var(--ease-out) both;
  }

  .compose__bar {
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3);
  }

  .compose__footer {
    border-radius: 0 0 var(--r-xl) var(--r-xl);
  }
}

@keyframes compose-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px)) scale(0.98);
  }
}

@keyframes compose-rise {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compose,
  .compose-backdrop {
    animation: none;
    transition: none;
  }
}

@media (hover: hover) {
  .compose-ai__toggle:hover {
    background: rgba(var(--light-violet-rgb), 0.16);
  }
  .compose-attach:hover,
  .compose__close:hover {
    background: var(--surface-2);
  }
}

/* "Bearbeiten" on a waiting new CCW mail (approval card): a quiet secondary action. */
.proposal-edit-btn {
  background: transparent;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}