.sq{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;padding:14px;display:grid;position:absolute;inset:0}.sq-switch{display:none}.sq-editor,.sq-preview{background:#fff;border:1px solid #e5e7eb;border-radius:10px;min-height:0;padding:14px 16px;position:relative;overflow:hidden}.sq-editor:after,.sq-preview:after{content:"";pointer-events:none;background:linear-gradient(#0000,#fff);height:28px;position:absolute;bottom:0;left:0;right:0}.sq-label{color:#111827;align-items:center;gap:8px;margin:0 0 4px;font-weight:600;display:flex}.sq-trigger{color:#374151;margin:0 0 12px 22px}.sq-steps{margin-top:8px}.sq-step{gap:10px;padding-bottom:12px;display:flex;position:relative}.sq-step:before{content:"";background:#e5e7eb;width:1px;position:absolute;top:32px;bottom:0;left:15px}.sq-step:last-child:before{display:none}.sq-step-icon{color:#64748b;background:#fff;border:1px solid #e2e8f0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex;box-shadow:0 1px 2px #0000000d}.sq-card{border:1px solid #e5e7eb;border-radius:4px;flex:1;min-width:0;position:relative}.sq-card-head{background:#f9fafb;border-bottom:1px solid #e5e7eb;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;padding:6px 10px;font-size:12.5px;display:flex;position:relative}.sq-when{color:#4b5563;align-items:center;gap:6px;display:flex}.sq-select{color:#111827;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:4px;align-items:center;gap:6px;min-height:28px;padding:0 8px;font-size:12px;display:inline-flex}.sq-subject{color:#111827;border:0;border-bottom:1px solid #f3f4f6;width:100%;padding:7px 10px;font-size:13px;display:block}.sq-subject:focus{outline-offset:-2px;outline:2px solid #c7d2fe}.sq-body{color:#232529;white-space:pre-wrap;min-height:48px;margin:0;padding:8px 10px;font-size:13px;line-height:1.55}.sq-body.is-short{color:#4b5563}.sq-token{color:#1e3a8a;white-space:nowrap;background:#eff6ff;border-radius:3px;padding:1px 4px}.sq-caret{vertical-align:-2px;background:#4338ca;width:1.5px;height:15px;margin-left:1px;animation:1s step-end infinite sq-blink;display:inline-block}@keyframes sq-blink{50%{opacity:0}}.sq-toolbar{border-top:1px solid #f3f4f6;justify-content:space-between;align-items:center;padding:4px 6px 4px 10px;display:flex;position:relative}.sq-format{color:#6b7280;align-items:center;gap:12px;font-size:12px;display:flex}.sq-insert{color:#2563eb;cursor:pointer;border-radius:4px;align-items:center;gap:4px;min-height:28px;padding:0 8px;font-size:12px;font-weight:500;display:inline-flex}.sq-insert:hover{background:#eff6ff}.sq-menu{z-index:20;background:#fff;border:1px solid #e5e7eb;border-radius:6px;min-width:190px;padding:4px;position:absolute;top:calc(100% + 4px);right:6px;box-shadow:0 12px 28px #11182724}.sq-menu.is-up{top:auto;bottom:calc(100% + 4px)}.sq-menu button{color:#111827;text-align:left;cursor:pointer;border-radius:4px;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:30px;padding:0 8px;font-size:12.5px;display:flex}.sq-menu button:hover{background:#f3f4f6}.sq-wait{color:#374151;flex-wrap:wrap;align-items:center;gap:6px;display:flex}.sq-wait button{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;display:inline-flex}.sq-wait-n{text-align:center;background:#fff;border:1px solid #d1d5db;border-radius:4px;min-width:22px;padding:1px 6px;font-weight:500}.sq-preview-head{color:#4b5563;align-items:center;gap:8px;margin-bottom:12px;font-size:12.5px;display:flex}.sq-mail{background:#fcfcfd;border:1px solid #e5e7eb;border-radius:8px;padding:12px}.sq-mail-meta{align-items:center;gap:8px;margin-bottom:10px;display:flex}.sq-mail-subject{color:#111827;margin:0 0 6px;font-weight:600}.sq-mail-body{white-space:pre-wrap;color:#374151;margin:0;font-size:13px;line-height:1.55}.sq-events{flex-direction:column;gap:8px;margin:12px 0 0;padding:0;font-size:12.5px;list-style:none;display:flex}.sq-event{color:#111827;align-items:flex-start;gap:8px;animation:.3s ease-out sq-in;display:flex}.sq-event span span{color:#6b7280}.sq-event-icon{color:#2563eb;background:#eff6ff;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.sq-event.is-reply .sq-event-icon{color:#15803d;background:#dcfce7}.sq-stopped{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;align-items:center;gap:8px;padding:8px 10px;font-weight:500;animation:.3s ease-out sq-in;display:flex}.sq-pending{color:#6b7280}.sq-send{color:#eef2ff;cursor:pointer;background:#4338ca;border-radius:4px;min-height:34px;padding:0 12px;font-size:12.5px;font-weight:500}@keyframes sq-in{0%{opacity:0;transform:translateY(4px)}}@container demo (width<=640px){.sq{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:10px}.sq-switch{border:1px solid var(--demo-border);background:#ffffffb3;border-radius:8px;justify-self:start;gap:2px;padding:3px;display:flex}.sq-switch button{color:#4b5563;cursor:pointer;border-radius:6px;min-height:32px;padding:0 14px;font-size:12.5px}.sq-switch button[aria-selected=true]{color:#111827;background:#fff;font-weight:500;box-shadow:0 1px 2px #00000014}.sq[data-view=edit] .sq-preview,.sq[data-view=preview] .sq-editor{display:none}.sq-preview-head .sq-select{pointer-events:auto}}@container demo (width<=480px){.sq{padding:10px}.sq-editor,.sq-preview{padding:12px}.max-sm-hidden,.sq-format{display:none}.sq-trigger{margin-bottom:8px}.sq-subject{font-size:16px}.sq-switch button{min-height:40px}}.sq-mail.is-collapsed .sq-mail-body{-webkit-line-clamp:2;white-space:normal;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}@container demo (width<=640px){.sq-mail.is-collapsed .sq-mail-meta{display:none}.sq-preview-head{margin-bottom:8px}}