/* The editor (editor.js): a full-screen layer – the design large in an e-mail, the chat beside it, and on a phone the
   e-mail on top with the chat as a sheet under it. The page's tokens; the signature itself lives in a shadow root.
   The layer is as tall as the visible area (--vv-top, --vv-h from the docked chat, chat.js), keyboard included. */
.ed { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%); z-index: 70; display: grid; padding: 12px; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ed-box { display: flex; flex-direction: column; min-height: 0; border-radius: 24px; background: var(--bg-2); overflow: hidden; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .5); }
.ed-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border-bottom: .5px solid var(--hair); }
.ed-top h2 { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-icon { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.ed-icon:hover { background: var(--bg-2); color: var(--ink); }
.ed-icon:disabled { opacity: .3; pointer-events: none; }
.ed-tools { display: flex; align-items: center; gap: 2px; }
.ed-tools .btn { margin-left: 6px; }
.ed-rec { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--ink-2); white-space: nowrap; opacity: 0; transition: opacity .3s ease; }
.ed-rec.on { opacity: 1; }
.ed-rec i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; animation: edPulse 1.2s ease-in-out infinite; }
@keyframes edPulse { 50% { opacity: .35; } }
.ed-top:has([data-save]) .ed-rec { display: none; } /* the panel's draft records nothing until it is saved */

.ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 38%); }
.ed-stage { min-height: 0; overflow: auto; display: grid; place-items: start center; padding: clamp(16px, 3vw, 40px); overscroll-behavior: contain; } /* top: a change of the e-mail's height moves nothing above it */
/* the e-mail: 432 px (the signature's 380 and its margins), zoomed by editor.js to fill the stage, up to 1.8× */
.ed-mail { width: 432px; padding: 22px 26px 26px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 .5px var(--hair-2), 0 24px 60px -30px rgba(0, 0, 0, .25); }
.ed-subj { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 24px; }
.ed-from { display: flex; gap: 10px; align-items: center; margin: 12px 0 14px; }
.ed-from img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ed-from b { display: block; font-size: .8125rem; font-weight: 600; line-height: 18px; }
.ed-from span { display: block; font-size: .75rem; color: var(--ink-3); line-height: 16px; }
.ed-text { display: grid; gap: 8px; margin-bottom: 20px; } /* the mail's text, as soft lines: the signature is what counts */
.ed-text i { height: 8px; border-radius: 4px; background: var(--bg-2); }
.ed-text i + i { width: 62%; }
.ed-sig { position: relative; margin: 0 -10px; } /* the GIF's 400 px frame (designs.js FRAME): its content in line with the mail's text */
.ed-disc { overflow: hidden; } /* the company's text under the signature (disclaimer.js), as it goes under the GIF */
.ed-disc .disc-in { padding: 8px 0 0; }

/* the card ↔ editor morph (View Transitions, editor.js): as long and as soft as its FLIP fallback */
::view-transition-group(ed-sig), ::view-transition-old(ed-sig), ::view-transition-new(ed-sig) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

.ed-side { min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-left: .5px solid var(--hair); }
.ed-side .chat { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; margin: 0; max-width: none; border: 0; border-radius: 0; }
.ed-side .ch-log { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; align-content: start; }
.ed-side .ch-bar { border-radius: 0; }

@media (max-width: 860px) {
  .ed { padding: 0; }
  .ed-box { border-radius: 0; }
  .ed-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) min(46vh, 420px); }
  .ed-stage { padding: 16px; }
  .ed-side { border-left: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -16px 40px -28px rgba(0, 0, 0, .35); }
}
@media (max-width: 560px) {
  .ed-rec span { display: none; } /* the dot says it */
  .ed-tools .btn { padding: 0 12px; }
  /* the panel's editor: close, title and „Zapisz dla wszystkich” on top, the steps in a row under them */
  .ed-top:has([data-save]) { flex-wrap: wrap; row-gap: 2px; }
  .ed-top:has([data-save]) .ed-tools { display: contents; }
  .ed-top:has([data-save]) [data-save] { order: 1; }
  .ed-top:has([data-save])::after { content: ""; order: 2; flex-basis: 100%; }
  .ed-top:has([data-save]) :is(.ed-rec, [data-step]) { order: 3; }
}

/* the animations' chips under the e-mail (fx-controls.css), the tray over the side column */
.ed-stage { align-content: start; row-gap: 14px; grid-auto-rows: max-content; } /* the chips' row scrolls sideways: an auto row would squeeze it */
.ed-side { position: relative; }

/* „Zmień wzór” (the panel): the gallery (gallery.js, gallery.css) over the stage; on a phone over the chat too, so it is
   the one scroller there */
.ed-body { position: relative; }
.ed-gallery { position: absolute; inset: 0 min(400px, 38%) 0 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-2); }
.ed-gallery[hidden] { display: none; }
.ed-change { gap: 6px; margin-right: 4px; }
.ed-change[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--ink); }
.ed.gl-open .ed-stage { visibility: hidden; } /* under the gallery: out of reach, its place kept */
@media (max-width: 860px) { .ed-gallery { inset: 0; } .ed.gl-open .ed-side { visibility: hidden; } }
@media (max-width: 560px) { .ed-change span { display: none; } .ed-change { width: 40px; padding: 0; justify-content: center; } }