/* The message composer (new, reply, forward). Proportions match HEY's
   compose sheet measured at a 1200px window. */

.composer-sheet {
  position: relative;
  width: min(1078px, 100%);
  min-height: 824.6px;
  margin: 0 auto;
  padding: 55px;
  border-radius: 29.7px;
  background: var(--color-sheet);
  box-shadow: rgb(var(--warm-rgb) / 0.5) 0 0 33px 0;
  font-size: 19.8px;
  line-height: 27.72px;
}

.composer-sheet--inline { min-height: 0; margin: 17.6px auto 14.85px; padding: 39.6px 57.2px; }

.composer-sheet__header { position: relative; height: 27.71px; margin-bottom: 24.75px; text-align: center; }
.composer-sheet__title { margin: 0; font-size: 22px; line-height: 22px; font-weight: 700; }

.composer-sheet__drafts {
  position: absolute;
  top: 0;
  right: 42px;
  height: 37.2px;
  padding: 5.28px 14.08px;
  border: 1px solid #3072dd;
  border-radius: 33px;
  color: #3072dd;
  font-size: 17.6px;
  line-height: 24.64px;
  text-decoration: none;
}

/* Inline replies have no title: the header is just the chevron. */
.composer-sheet__header--inline { height: 0; }

/* Minimize: parks the draft in the tray at the bottom left */
.composer-sheet__minimize {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 31px;
  height: 27px;
  padding: 0;
  border: none;
  border-radius: 46px;
  background: none;
  color: rgb(var(--ink-rgb) / 0.35);
  cursor: pointer;
}

.composer-sheet__header--inline .composer-sheet__minimize { top: -24px; }
.composer-sheet__minimize svg { width: 20px; height: 20px; }
.composer-sheet__minimize:hover { background: rgb(var(--ink-rgb) / 0.06); color: var(--color-ink); }

/* "An earlier version wasn't saved" */
.composer-sheet__restore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 12px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #fff8e1;
  font-size: 15.4px;
  line-height: 21.56px;
}

.composer-sheet__restore[hidden] { display: none; }
.composer-sheet__restore span { flex: 1; min-width: 200px; }

.composer-sheet__restore-button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 33px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font: 500 15.4px/1 var(--font);
  cursor: pointer;
}

.composer-sheet__restore-button:first-of-type { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }

.composer-sheet__errors { margin: 0 0 12px; padding: 0.6rem 1rem 0.6rem 2rem; border-radius: 8px; background: #fde8e8; color: #8a1f1f; font-size: 15.4px; }
p.composer-sheet__errors { padding-left: 1rem; } /* no list bullets to make room for */

/* Field rows */

.composer-field {
  position: relative;
  display: flex;
  height: 55.77px;
  padding-top: 2.2px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.15);
}

.composer-field[hidden] { display: none; }
.composer-field:has(.recipients) { height: auto; min-height: 55.77px; }

/* Recipient chips and suggestions */

.recipients {
  position: relative;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44.6px;
  margin: 3.9px 4px 3px 23.8px;
  border-radius: 6.6px;
}

.recipients__chips { display: contents; }

.recipients__input {
  flex: 1;
  min-width: 120px;
  height: 44.6px;
  padding: 6.6px 0 7.7px 2.2px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  outline: none;
}

.recipient-chip {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 9.9px 0 15.84px;
  border: 2px solid var(--color-sheet);
  border-radius: 99px;
  background: rgb(48 114 221 / 0.05);
  white-space: nowrap;
  cursor: grab;
  outline: none;
}

.recipient-chip:focus { border-color: #a4d2ff; }
.recipient-chip--invalid { background: rgb(207 0 0 / 0.08); color: #9b1c1c; }

.recipient-chip__remove {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 7.92px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / 0.2);
  color: #fff;
  font: 700 14px/1 var(--font);
  cursor: pointer;
}

.recipients__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: 330px;
  margin: 0;
  padding: 12px;
  border-radius: 23.1px;
  border: 1px solid var(--popup-line);
  background: var(--popup-surface);
  box-shadow: var(--popup-shadow);
  list-style: none;
  color: var(--popup-ink);
}

.recipients__menu[hidden] { display: none; }

.recipients__option {
  display: flex;
  flex-direction: column;
  padding: 7px 12px;
  border-radius: 8.8px;
  font-size: 15.4px;
  line-height: 21.56px;
  font-weight: 500;
  cursor: pointer;
}

.recipients__option:hover { background: var(--popup-hover); }
.recipients__option[aria-selected="true"] { background: var(--popup-current); color: var(--popup-current-ink); }
.recipients__option-email { font-size: 13.2px; font-weight: 400; opacity: 0.75; }
.composer-field--to { padding-right: 88px; }

.composer-field__label { margin-top: 11px; padding-right: 11px; white-space: nowrap; }

/* The From picker, as the reference's (measured): "From" then a borderless select with no arrow, shown only with more than one address */
.composer-field--from { align-items: center; }
.composer-field--from .composer-field__label { margin-top: 0; }
.composer-field__from { flex: 1; min-width: 0; height: 49.5px; padding: 9.9px; border: 0; background: transparent; color: var(--color-ink); font: 400 19.8px/27.72px var(--font); appearance: none; cursor: pointer; }
.composer-field__from:focus { outline: none; }

.composer-field__input {
  flex: 1;
  min-width: 0;
  height: 44.6px;
  margin: 3.9px 4px 0 23.8px;
  padding: 6.6px 0 7.7px 2.2px;
  border: 1px solid transparent;
  border-radius: 6.6px;
  background: none;
  color: inherit;
  font: inherit;
  outline: none;
}


.composer-field__input--subject { height: 49.5px; margin: 0; padding: 9.9px; }

.composer-field__copies {
  position: absolute;
  top: 16.2px;
  right: 0;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 3.96px;
  background: none;
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
}

/* Body */

.composer-sheet__body { position: relative; margin-top: 12.375px; padding: 2.2px 0 11px; }

trix-editor.composer-sheet__editor pre { position: relative; padding: 11px; border-radius: 6.6px; background: rgb(var(--ink-rgb) / 0.04); font-size: 15.4px; line-height: 22px; white-space: pre-wrap; }

/* Code language: a small select over the code block's top right */
.composer-code-language {
  position: absolute;
  z-index: 2;
  height: 28px;
  padding: 0 24px 0 8px;
  border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 6.6px;
  background-color: var(--color-sheet);
  color: var(--color-muted);
  font: 500 13.2px/1 var(--font);
  outline: none;
}

.composer-code-language[hidden] { display: none; }

/* Snippet picker: a gradient popup under the caret */
.popup-menu.composer-snippets { top: 0; right: auto; left: 0; z-index: 4; padding: 12px 12px 14px; }
.popup-menu.composer-snippets[hidden] { display: none; }
.composer-snippets .popup-menu__title { margin-top: 2px; }

.composer-snippets__filter {
  width: 100%;
  height: 36px;
  margin: 0 0 8px;
  padding: 0 10px;
  border: none;
  border-radius: 6.6px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font: 400 15.4px/1 var(--font);
  outline: none;
}

.composer-snippets__list { max-height: 240px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }

.composer-snippets__option {
  display: flex;
  flex-direction: column;
  padding: 7px 10px;
  border-radius: 8.8px;
  cursor: pointer;
}

.composer-snippets__option:hover { background: rgb(var(--shade-rgb) / 0.06); }
.composer-snippets__option[aria-selected="true"] { background: rgb(var(--shade-rgb) / 0.12); }
.composer-snippets__name { font-weight: 600; }
.composer-snippets__preview { overflow: hidden; font-size: 13.2px; font-weight: 400; line-height: 18px; opacity: 0.8; text-overflow: ellipsis; white-space: nowrap; }
.composer-snippets__empty { margin: 4px 10px 8px; font-weight: 400; }
.composer-snippets__empty[hidden] { display: none; }
.composer-snippets__empty a, .composer-snippets__manage { color: var(--popup-current-ink); }
.composer-snippets__manage { display: inline-block; margin: 8px 10px 0; font-size: 13.2px; }

trix-editor.composer-sheet__editor {
  min-height: 257.4px;
  padding: 11px 0;
  border: none;
  border-radius: 3px;
  outline: none;
  font-size: 19.8px;
  line-height: 27.72px;
}

trix-editor.composer-sheet__editor:empty:not(:focus)::before,
trix-editor.composer-sheet__editor:empty::before { color: rgb(var(--ink-rgb) / 0.6); }

trix-editor.composer-sheet__editor blockquote { margin: 0; padding-left: 13px; border-left: 1px solid rgb(var(--ink-rgb) / 0.15); }
trix-editor.composer-sheet__editor a { color: #3072dd; }

.composer-sheet__note, .composer-sheet__files { margin: 4px 0 0; color: var(--color-muted); font-size: 15.4px; line-height: 21.56px; }
.composer-sheet__files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.composer-sheet__files[hidden] { display: none; }
.composer-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px 0 14px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(48 114 221 / 0.05);
  color: var(--color-ink);
}

.composer-file__size { color: var(--color-muted); font-size: 13.2px; }

.composer-file__remove {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / 0.2);
  color: #fff;
  font: 700 14px/1 var(--font);
  cursor: pointer;
}

.composer-file__bar { position: absolute; inset: auto 0 0; height: 3px; display: none; }
.composer-file--uploading .composer-file__bar { display: block; }
.composer-file__progress { display: block; width: 0; height: 100%; background: #3072dd; transition: width 0.2s; }
.composer-file--failed { background: rgb(207 0 0 / 0.08); color: #9b1c1c; }
.composer-buttons__send:disabled { opacity: 0.5; cursor: progress; }

/* Toolbar (hidden until the A button turns it on) */

trix-toolbar.composer-toolbar { display: block; }
trix-toolbar.composer-toolbar[hidden] { display: none; }

.composer-toolbar__row {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 42.7px;
  padding: 0 5.5px;
  border-radius: 33px;
  background: var(--color-paper);
}

.composer-toolbar__group { display: flex; }

.composer-toolbar__row button {
  display: inline-grid;
  place-items: center;
  width: 51.48px;
  height: 31.68px;
  padding: 0 9.9px;
  border: none;
  border-radius: 33px;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}

/* Icons fill the button's height, as HEY's (Trix's icons at contain size) */
.composer-toolbar__row button svg { width: 31.68px; height: 31.68px; color: #000; opacity: 0.6; }
.composer-toolbar__row button:hover { background: rgb(var(--ink-rgb) / 0.06); }
.composer-toolbar__row button.trix-active { background: rgb(48 114 221 / 0.12); }
.composer-toolbar__row button.trix-active svg { opacity: 1; color: #3072dd; }
.composer-toolbar__row button:disabled svg { opacity: 0.25; }

.composer-toolbar__dialogs { position: relative; }

.composer-link-dialog {
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 0;
  display: none;
  align-items: center;
  gap: 8px;
  width: 600px;
  max-width: 100%;
  height: 73px;
  padding: 18.5px;
  border-radius: 22px;
  background: #3072dd;
}

.composer-link-dialog[data-trix-active] { display: flex; }

.composer-link-dialog__input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 6.6px;
  font: inherit;
  font-size: 15.4px;
}

.composer-link-dialog__button {
  width: 77px;
  height: 32px;
  border: none;
  border-radius: 33px;
  background: var(--color-accent);
  color: #fff;
  font: 500 14.85px/1 var(--font);
  cursor: pointer;
}

/* Color dialog: nine text colours over nine highlights */
.composer-color-dialog {
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 400px;
  max-width: 100%;
  min-height: 119px;
  padding: 18.5px;
  border-radius: 22px;
  background: #3072dd;
}

.composer-color-dialog[hidden] { display: none; }
.composer-color-dialog__row { display: flex; justify-content: space-between; }

.composer-color-dialog__swatch {
  width: 37px;
  height: 37px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--color-sheet);
  font: 700 15.4px/37px var(--font);
  cursor: pointer;
}

.composer-color-dialog__row:last-of-type .composer-color-dialog__swatch { color: var(--color-ink); }
.composer-color-dialog__swatch:hover { box-shadow: 0 0 0 2px rgb(var(--sheet-rgb) / 0.6); }
.composer-color-dialog__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-accent); }

.composer-color-dialog__remove {
  align-self: flex-start;
  height: 32px;
  margin-top: 4px;
  padding: 0 14px;
  border: none;
  border-radius: 33px;
  background: var(--popup-tile);
  color: var(--popup-ink);
  font: 500 14.85px/1 var(--font);
  cursor: pointer;
}

.composer-color-dialog__remove[hidden] { display: none; }

/* Minimized drafts: a fixed tray at the bottom left, one pill per draft */
.parked-drafts { position: fixed; bottom: 16px; left: 16px; z-index: 20; max-width: calc(100vw - 32px); }
.parked-drafts[hidden] { display: none; }
/* Out of the way of an open composer's Send bar */
body:has(.composer-sheet) .parked-drafts { display: none; }
@media (max-width: 1000px) { body:has(.topic-toolbar) .parked-drafts { bottom: 80px; } }
.parked-drafts__list { display: flex; flex-wrap: wrap-reverse; gap: 8px; margin: 0; padding: 0; list-style: none; }

.parked-drafts__pill {
  display: block;
  max-width: 240px;
  height: 37px;
  padding: 5.28px 16px;
  overflow: hidden;
  border-radius: 33px;
  background: var(--color-accent);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
  color: #fff;
  font-size: 15.4px;
  line-height: 26px;
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parked-drafts__pill:hover { filter: brightness(1.08); }

/* Button bar */

.composer-sheet__submit { padding: 11px 0; background: var(--color-sheet); }
.composer-sheet--inline .composer-sheet__submit,
.composer-sheet:has(.composer-sheet__header) .composer-sheet__submit { position: sticky; bottom: 0; z-index: 2; }

.composer-buttons { position: relative; display: flex; align-items: flex-start; margin-left: -1px; }

.composer-buttons__send {
  height: 41.6px;
  padding: 5.94px 43.56px 5.94px 15.84px;
  border: 1px solid #3072dd;
  border-radius: 33px;
  background: #3072dd;
  color: #fff;
  font: 500 19.8px/27.72px var(--font);
  cursor: pointer;
}

/* Send options: the chevron on the Send pill opens a menu above it */
.send-options { position: absolute; left: 121px; top: 3.3px; }

.composer-buttons__send-chevron {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 52.8px;
  color: #fff;
  list-style: none;
  cursor: pointer;
}

.composer-buttons__send-chevron::-webkit-details-marker { display: none; }
.composer-buttons__send-chevron:hover, .send-options[open] .composer-buttons__send-chevron { background: rgb(var(--sheet-rgb) / 0.18); }

.send-options .popup-menu { top: auto; right: auto; bottom: calc(100% + 10px); left: -121px; }
.send-options .popup-menu[hidden] { display: none; }
.send-options__menu { width: 330px; }
.send-options__menu .popup-menu__row { width: 100%; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
.send-options__menu .popup-menu__row:hover, .send-options__menu .popup-menu__row:focus-visible { background: rgb(var(--shade-rgb) / 0.12); outline: none; }

.popup-menu__title { margin: 8.4px 0 6.7px 8.9px; color: var(--popup-muted); font-size: 13.475px; font-weight: 600; text-transform: uppercase; }

.schedule-popup { width: 451px; padding: 22px; border-radius: 26.4px; font-size: 17.6px; line-height: 24.64px; }
.schedule-popup__title { margin: 0 0 18px; font-weight: 600; }
.schedule-popup__row { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }

.schedule-popup__select {
  height: 44px;
  padding: 8.8px 33px 8.8px 8.8px;
  border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 6.6px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font: inherit;
}

.schedule-popup__select--date { width: 146px; }
.schedule-popup__select--hour { width: 224px; }

.schedule-popup__submit {
  width: 100%;
  height: 37px;
  padding: 5.28px 14.08px;
  border: none;
  border-radius: 33px;
  background: var(--color-accent);
  color: #fff;
  font: 500 17.6px/24.64px var(--font);
  cursor: pointer;
}

.schedule-popup__note { margin: 14px 0 0; font-size: 14.67px; line-height: 1.4; opacity: 0.85; }

.composer-sheet__scheduled { margin: 0 0 12px; padding: 8px 14px; border-radius: 12px; background: rgb(48 114 221 / 0.06); font-size: 15.4px; }
.composer-sheet__unschedule { margin-left: 6px; padding: 0; border: none; background: none; color: #3072dd; font: inherit; text-decoration: underline; cursor: pointer; }
.draft-row__scheduled { margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--popup-current); color: var(--popup-current-ink); font-size: 12px; font-weight: 600; }

.composer-buttons__send-chevron svg { width: 22px; height: 22px; }

.composer-buttons__save {
  height: 41.6px;
  margin-left: 6.19px;
  padding: 5.94px 15.84px;
  border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 33px;
  background: none;
  color: var(--color-muted);
  font: 500 19.8px/27.72px var(--font);
  cursor: pointer;
}

.composer-buttons__icon {
  display: inline-grid;
  place-items: center;
  width: 39.6px;
  height: 39.6px;
  border: none;
  border-radius: 50%;
  background: none;
  color: #8f959b; /* the reference's grey for these icons */
  cursor: pointer;
}

/* HEY's icons fill 62% of the round button and read heavier than ours */
.composer-buttons__icon svg { width: 24.55px; height: 24.55px; }
.composer-buttons__icon svg path { stroke-width: 2.3px; }
.composer-buttons__attach { margin-left: 24.8px; }
.composer-buttons__format { margin-left: 12.3px; }
/* The reference's A is 21.7px of ink in its 24.6px box, its trash 22.4px; ours
   sat inside a 24-unit grid with room around them, so they're drawn up to match */
.composer-buttons__format svg { scale: 1.16; translate: 0 -0.6px; }
.composer-buttons__format[aria-pressed="true"] { box-shadow: #a4d2ff 0 0 0 2px; color: var(--color-ink); }
.composer-buttons__icon:hover { background: rgb(var(--ink-rgb) / 0.06); }

.composer-buttons__discard { margin: 0 -1px 0 auto; border: 1px solid rgb(var(--ink-rgb) / 0.15); }
/* Lucide's trash, at the reference's 22.4px of ink and 1.95px lines */
.composer-buttons__discard svg { width: 23.3px; height: 23.3px; scale: 1.05; }
.composer-buttons__discard svg path { stroke-width: 1.9px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Drafts page rows */

.draft-row { position: relative; }
.draft-row form { position: absolute; top: 50%; right: -44px; translate: 0 -50%; margin: 0; }

.draft-row__delete {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}

.draft-row__delete svg { width: 20px; height: 20px; }
.draft-row__delete:hover { background: rgb(var(--ink-rgb) / 0.06); }

@media (max-width: 640px) {
  .composer-sheet { padding: 24px 16px; min-height: 0; }
  .composer-sheet__drafts { position: static; display: inline-block; margin-top: 8px; }
  .composer-sheet__header { height: auto; }
  .composer-field__input { margin-left: 8px; }
  .draft-row form { right: 0; }
}