/* ═══════════════════════════════════════════════════════════════
   ПРЕДПРОСМОТР
   ═══════════════════════════════════════════════════════════════ */
.stage{display:flex;flex-direction:column;height:100%;min-height:0}
.stage-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 2px}
.stage-h .t{font:700 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
.stage-h .grow{flex:1}
.stage-h .w{font-size:11px;color:var(--ink-3);white-space:nowrap}
.edt{font:600 12px/1 var(--ui);padding:8px 11px;border-radius:9px;border:0;cursor:pointer;
  background:var(--fill);color:var(--ink-2);display:flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .2s var(--e),color .2s var(--e),transform .18s var(--e-spring),box-shadow .25s var(--e)}
.edt:hover{background:var(--raise);box-shadow:var(--sh-pop);color:var(--ink);transform:translateY(-1px)}
.edt:active{transform:scale(.95)}
.edt[aria-pressed="true"]{background:var(--acc);color:var(--on-acc);box-shadow:0 2px 8px var(--acc-a40)}
.edt svg{stroke:currentColor}
.edt span{white-space:nowrap}
.subj{display:flex;align-items:center;gap:10px;padding:11px 16px;border:.5px solid var(--hair);border-bottom:0;
  background:var(--surface);border-radius:16px 16px 0 0}
.subj .k{font:700 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
.subj input{flex:1;font:600 13px/1.3 var(--ui);color:var(--ink);background:transparent;border:0;padding:4px 0;min-width:0}
.subj input:focus{outline:none}
.subj button{font:600 11.5px/1 var(--ui);padding:7px 11px;border-radius:8px;border:0;background:var(--fill);color:var(--ink-2);cursor:pointer;
  transition:background .2s var(--e),transform .16s var(--e),color .2s var(--e)}
.subj button:hover{background:var(--fill-2);color:var(--ink)}
.subj button:active{transform:scale(.94)}
.frame{position:relative;flex:1;min-height:0;background:#F1EFEA;border-radius:0 0 16px 16px;overflow:auto;
  box-shadow:var(--sh-2);border:.5px solid var(--hair);transition:box-shadow .3s var(--e)}
.frame *{box-sizing:content-box}
.frame::-webkit-scrollbar{width:9px}
.frame::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:9px;border:3px solid transparent;background-clip:content-box}
#frame{min-height:100%}
#frame[contenteditable="true"]{outline:none;cursor:text}
#frame[contenteditable="true"] td:hover{box-shadow:inset 0 0 0 1px var(--acc-a40)}
.frame.editing{box-shadow:0 0 0 2px var(--acc),var(--sh-2)}
.frame.busy::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.edit-tip{margin-top:9px;padding:9px 12px;border-radius:10px;background:var(--tint);color:var(--tint-ink);
  font-size:11.5px;line-height:1.5;animation:rise .35s var(--e-out) both}
.edit-tip b{font-weight:600}
.src{margin-top:12px;flex:0 0 auto}
.src summary{cursor:pointer;font-size:11.5px;color:var(--ink-3);list-style:none;padding-left:4px}
.src summary::-webkit-details-marker{display:none}
.src textarea{width:100%;height:160px;margin-top:9px;font:11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);background:var(--fill);border:0;border-radius:12px;padding:12px}
.src textarea:focus{outline:none;box-shadow:0 0 0 4px var(--acc-a12)}

/* перелистывание текста при правках */
.ghost{position:absolute;left:0;right:0;top:0;height:100%;overflow:hidden;pointer-events:none;z-index:3;background:#F4F2EE}
.swap-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;
  font:700 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(120deg,var(--ai),var(--ai-2));padding:7px 12px;border-radius:20px;box-shadow:var(--sh-pop);
  animation:badge 1.6s var(--e-out) forwards;pointer-events:none}
@keyframes badge{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}
  15%,70%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
.frame .hl{animation:hlfade 2.4s var(--e-out) forwards;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@keyframes hlfade{0%{background-color:rgba(122,77,255,0);box-shadow:0 0 0 0 rgba(122,77,255,0)}
  14%,55%{background-color:rgba(122,77,255,.2);box-shadow:0 0 0 4px rgba(122,77,255,.16)}
  100%{background-color:transparent;box-shadow:0 0 0 0 transparent}}
tr.hl>td{animation:hlfade 2.4s var(--e-out) forwards;border-radius:10px}

/* блоки письма: наведение и выбор целиком */
#frame [data-blk]>td{transition:box-shadow .22s var(--e),border-radius .22s var(--e)}
#frame:not([contenteditable="true"]) [data-blk]{cursor:pointer}
#frame [data-blk].hov>td{box-shadow:inset 0 0 0 2px var(--ai-a30);border-radius:10px}
#frame [data-blk].pick>td{box-shadow:inset 0 0 0 2px var(--ai),0 0 0 4px var(--ai-a12);border-radius:10px;animation:blkpick .55s var(--e-out)}
@keyframes blkpick{from{box-shadow:inset 0 0 0 2px var(--ai),0 0 0 14px rgba(122,77,255,0)}to{box-shadow:inset 0 0 0 2px var(--ai),0 0 0 4px var(--ai-a12)}}

/* смена письма: блик и вспышка цветом оформления */
.sweep{position:absolute;left:0;right:0;top:0;height:100%;z-index:4;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:220% 100%;
  animation:sweep .9s var(--e-out) both}
@keyframes sweep{from{background-position:180% 0;opacity:1}to{background-position:-90% 0;opacity:0}}
.dfx{position:absolute;left:0;right:0;top:0;height:100%;z-index:4;pointer-events:none;
  background:radial-gradient(circle at 50% 28%,var(--c) 0,transparent 62%);opacity:0;animation:dfx 1.05s var(--e-out) both}
@keyframes dfx{0%{opacity:0;transform:scale(.55)}28%{opacity:.26}100%{opacity:0;transform:scale(1.7)}}
.frame.designed{box-shadow:0 0 0 3px var(--ai-a30),0 12px 40px -18px var(--ai),var(--sh-2)}

/* всплывашка над выделенным текстом */
.selbar{position:fixed;z-index:120;display:flex;align-items:center;gap:6px;padding:6px;border-radius:13px;
  background:var(--surface);border:.5px solid var(--hair);box-shadow:var(--sh-float);
  animation:pop .22s var(--e-out) both;max-width:min(420px,calc(100vw - 32px))}
.selbar input{flex:1;min-width:180px;font:500 13px/1 var(--ui);color:var(--ink);background:var(--fill);border:.5px solid transparent;
  border-radius:9px;padding:9px 11px;transition:background .2s,border-color .2s,box-shadow .2s}
.selbar input:focus{outline:none;background:var(--raise);border-color:var(--ai-a30);box-shadow:0 0 0 4px var(--ai-a12)}
.selbar .go{flex:0 0 34px;height:34px;border:0;border-radius:9px;cursor:pointer;color:#fff;
  background:linear-gradient(120deg,var(--ai),var(--ai-2));display:flex;align-items:center;justify-content:center;
  transition:transform .18s var(--e-spring),filter .2s}
.selbar .go:hover{filter:brightness(1.06);transform:translateY(-1px)}
.selbar .go:active{transform:scale(.94)}
.selbar .go svg{stroke:#fff}
.selbar .q{border:0;background:var(--fill);color:var(--ink-2);font:600 11.5px/1 var(--ui);padding:9px 10px;border-radius:9px;cursor:pointer;
  white-space:nowrap;transition:background .18s,color .18s}
.selbar .q:hover{background:var(--ai-a12);color:var(--ai)}
.selbar.wait{pointer-events:none;opacity:.7}

/* письмо во весь экран */
body.focus .col-1,body.focus .col-2{display:none}
body.focus .work{grid-template-columns:1fr}
body.focus .col-3{border-left:0;background:var(--page);padding:18px 22px}
body.focus .stage{max-width:1000px;margin:0 auto;width:100%}
body.focus .frame{box-shadow:var(--sh-2)}
body.focus .nav{width:0;overflow:hidden;border:0;padding:0}
body.focus .app{grid-template-columns:0 1fr}
body.focus #fresh{display:none}
body.focus.drawer-on .col-1,body.focus.drawer-on .col-2{display:none}
body.focus.drawer-on .work{grid-template-columns:minmax(0,1fr)}
body.focus.drawer-on #frame{zoom:1}