/* Phone editor + dock + full menu (agreed 18 Oct 2026). */
:root{--pe-grad:linear-gradient(105deg,#ffda72,#ff697c 48%,#ed008d)}
.pe{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:#08080a;color:#f4f4f6;overflow:hidden;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.pe button{font:inherit;color:inherit}
.pe-top{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));background:linear-gradient(#08080ae6,#08080a00)}
.pe-icon{width:40px;height:40px;border-radius:14px;border:1px solid #ffffff1f;background:#0d0d10b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;cursor:pointer;color:#fff}
.pe-icon svg{width:20px;height:20px}
.pe-brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.02em;font-size:18px;color:#fff;text-decoration:none}
.pe-brand i{width:26px;height:26px;border-radius:8px;background:var(--pe-grad);display:grid;place-items:center;font-style:normal;font-size:14px;color:#fff}
.pe-spacer{flex:1}
.pe-status{font-size:12px;color:#c9c9d0;display:flex;align-items:center;gap:6px;text-shadow:0 1px 6px #000}.pe-status b{width:7px;height:7px;border-radius:50%;background:#7fe0ad;display:inline-block}.pe-status b.busy{background:#ffda72}
.pe-publish{height:40px;padding:0 16px;border-radius:999px;border:0;background:#fff;color:#111!important;font-weight:700;cursor:pointer}.pe-publish:disabled{opacity:.6}
.pe-stage{flex:1;overflow:auto;scrollbar-width:none;padding-bottom:230px;overscroll-behavior:contain}.pe-stage::-webkit-scrollbar{display:none}
.pe-page{position:relative;max-width:520px;margin:0 auto}
.pe-page .lm-stage,.pe-page .th-stage{min-height:auto;padding:0;background:none}.pe-page .lm-backdrop{display:none}.pe-page .lm-stage-card{max-width:none;margin:0;border-radius:0;box-shadow:none}
.pe-page [data-pe-edit]{cursor:pointer;border-radius:12px;outline:1.5px dashed transparent;outline-offset:4px;transition:outline-color .2s}
.pe-page [data-pe-edit]:focus-visible{outline-color:#ffffff80}
.pe-page .pe-is-editing{outline:2px solid #ff697c!important;outline-offset:4px}
.pe-add-link{display:block;width:calc(100% - 32px);margin:12px auto 4px;padding:14px;border-radius:16px;border:1.5px dashed currentColor;background:transparent;opacity:.55;font-weight:600;cursor:pointer}
.th .pe-add-link{color:var(--t-text)}.lm-profile .pe-add-link{color:#fff}
.pe-pop{position:absolute;z-index:30;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px;border-radius:14px;background:#141417;border:1px solid #2f2f35;box-shadow:0 12px 30px #0009;white-space:nowrap;animation:pe-pop .2s cubic-bezier(.22,1,.36,1)}
@keyframes pe-pop{from{opacity:0;transform:translate(-50%,-4px)}}
.pe-pop button{border:0;background:#222227;border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:600;cursor:pointer;color:#fff}.pe-pop button.ai{background:var(--pe-grad)}
.pe-hint{position:absolute;top:68px;left:50%;transform:translateX(-50%);z-index:15;padding:8px 14px;border-radius:999px;background:#ffffffeb;color:#111;font-size:12px;font-weight:700;box-shadow:0 8px 24px #0006;animation:pe-hint 5s ease forwards;white-space:nowrap}
@keyframes pe-hint{0%{opacity:0;transform:translate(-50%,-6px)}8%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.pe-bottom{position:absolute;left:0;right:0;bottom:0;z-index:25;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:linear-gradient(#08080a00,#08080ae0 30%,#08080a);pointer-events:none}
.pe-bottom-in{max-width:560px;margin:0 auto;display:grid;gap:10px;pointer-events:auto}
.pe-chips{display:flex;gap:8px;overflow:auto;scrollbar-width:none;padding:0 2px}.pe-chips::-webkit-scrollbar{display:none}
.pe-chips button{flex:none;border:1px solid #2f2f35;background:#141417;border-radius:999px;padding:8px 12px;font-size:12.5px;cursor:pointer;color:#e8e8ec}
.pe-ai{border-radius:26px;padding:1.5px;background:var(--pe-grad);box-shadow:0 10px 40px #ff697c33;margin:0}
.pe-ai-in{display:flex;align-items:flex-end;gap:8px;border-radius:25px;background:#121215;padding:8px 8px 8px 14px}
.pe-ai-spark{width:20px;height:20px;flex:none;margin-bottom:9px;color:#ff8aa0}
.pe-ai-field{position:relative;flex:1;min-height:38px;display:flex;align-items:center;min-width:0}
.pe-ai-field textarea{width:100%;min-height:0!important;height:38px;border:0!important;outline:0;resize:none;background:transparent!important;box-shadow:none!important;color:#f4f4f6;font:16px/1.3 Inter,system-ui,sans-serif;padding:9px 0!important;margin:0!important;border-radius:0!important;max-height:120px}
.pe-ghost{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;color:#ffffff73;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-ai:not(.has-text) .pe-ghost::after{content:"";display:inline-block;width:1.5px;height:18px;margin-left:2px;vertical-align:-3px;background:#ff8aa0;animation:pe-blink 1s steps(2) infinite}
.pe-ai.has-text .pe-ghost{display:none}
@keyframes pe-blink{50%{opacity:0}}
.pe-ai-btn{width:38px;height:38px;flex:none;border-radius:14px;border:0;display:grid;place-items:center;cursor:pointer;background:#ffffff12;color:#fff;transition:transform .2s,opacity .2s}
.pe-ai-btn svg{width:18px;height:18px}.pe-ai-btn.live{background:#ff697c}
.pe-send{background:var(--pe-grad);opacity:0;transform:scale(.8);pointer-events:none;width:0;margin-left:-8px;overflow:hidden}
.pe-ai.has-text .pe-send{opacity:1;transform:none;pointer-events:auto;width:38px;margin-left:0}
.pe-dock{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px;border-radius:22px;background:#141417;border:1px solid #26262b}
.pe-dock a{display:grid;justify-items:center;gap:3px;padding:7px 2px;border-radius:16px;color:#a7a7b0;text-decoration:none;font-size:11px;font-weight:600}
.pe-dock a svg{width:22px;height:22px}.pe-dock a.on{color:#fff;background:#232328}
.pe-sheet{position:absolute;left:0;right:0;bottom:0;z-index:24;transform:translateY(105%);transition:transform .45s cubic-bezier(.22,1,.36,1)}.pe-sheet.open{transform:none}
.pe-sheet-in{max-width:560px;margin:0 auto;background:#141417;border:1px solid #2a2a2f;border-bottom:0;border-radius:24px 24px 0 0;padding:12px 16px 176px;box-shadow:0 -20px 50px #0009}
.pe-sheet.open ~ .pe-bottom .pe-chips{display:none}.pe-sheet.open ~ .pe-bottom{background:none}
.pe-grab{width:44px;height:5px;border-radius:5px;background:#3a3a40;margin:0 auto 12px;cursor:pointer}
.pe-msg{display:flex;gap:10px;margin:8px 0;font-size:14px;line-height:1.45}.pe-msg p{margin:0}
.pe-msg.me{justify-content:flex-end}.pe-msg.me p{background:#26262c;border-radius:16px 16px 4px 16px;padding:9px 12px;max-width:80%}
.pe-msg.ai i{width:26px;height:26px;flex:none;border-radius:9px;background:var(--pe-grad);display:grid;place-items:center;font-style:normal;font-size:13px;color:#fff;font-weight:800}.pe-msg.ai p{margin-top:3px}
.pe-typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#bbb;margin-right:4px;animation:pe-ty 1s infinite}.pe-typing span:nth-child(2){animation-delay:.15s}.pe-typing span:nth-child(3){animation-delay:.3s}
@keyframes pe-ty{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.pe-sheet-actions,.pe-edit-actions{display:flex;gap:8px;margin-top:12px}
.pe-sheet-actions button,.pe-edit-actions button{flex:1;height:44px;border-radius:999px;border:1px solid #33333a;background:#1d1d22;font-weight:700;cursor:pointer;color:#fff}
.pe-sheet-actions .keep,.pe-edit-actions .keep{background:#fff;color:#111;border-color:#fff}
.pe-edit{position:absolute;inset:0;z-index:35;background:#0009;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s}.pe-edit.open{opacity:1;pointer-events:auto}
.pe-edit-in{width:100%;max-width:560px;margin:0 auto;max-height:85dvh;overflow:auto;background:#141417;border:1px solid #2a2a2f;border-bottom:0;border-radius:24px 24px 0 0;padding:20px 18px;padding-bottom:max(20px,env(safe-area-inset-bottom));transform:translateY(30px);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pe-edit.open .pe-edit-in{transform:none}
.pe-edit h3{margin:0 0 12px;font-size:18px}.pe-edit h4{margin:18px 0 4px;font-size:12px;letter-spacing:.08em;color:#8d8d96;text-transform:uppercase}
.pe-edit label{display:grid;gap:6px;margin:10px 0;font-size:13px;font-weight:600;color:#d8d8de}
.pe-edit input:not([type=checkbox]):not([type=file]),.pe-edit textarea{width:100%;box-sizing:border-box;border:1px solid #2f2f35;background:#0e0e11;color:#fff;border-radius:12px;padding:12px;font:16px Inter,system-ui,sans-serif}
.pe-muted{color:#9a9aa3;font-size:13px;margin:-4px 0 6px}
.pe-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #222227}
.pe-row>span{display:flex;align-items:center;gap:10px;min-width:0}.pe-row>span svg{width:18px;height:18px;color:#ff8aa0;flex:none}.pe-row small{display:block;color:#8d8d96;font-size:11.5px;margin-top:2px;font-weight:400}
.pe-row>span b{font-size:14px}.pe-row>span:has(small){display:block}
.pe-price{display:flex;align-items:center;gap:4px}.pe-price input{width:74px!important;text-align:center;padding:9px!important}.pe-price small{color:#8d8d96;width:28px}
.pe-always{font-size:12px;color:#8d8d96;white-space:nowrap}
.pe-file{display:flex!important;align-items:center;justify-content:center;height:48px;border-radius:999px;background:#fff;color:#111!important;cursor:pointer}.pe-file input{display:none}
.pe-plain,.pe-ai-inline{width:100%;height:44px;margin-top:8px;border-radius:999px;border:1px solid #33333a;background:#1d1d22;font-weight:600;cursor:pointer;color:#fff}.pe-ai-inline{background:var(--pe-grad);border:0}
.pe-menu{position:fixed;inset:0;z-index:80;background:#08080af5;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:16px;padding-top:max(16px,env(safe-area-inset-top));overflow:auto;opacity:0;transition:opacity .25s;color:#f4f4f6;font-family:Inter,system-ui,sans-serif}
.pe-menu.open{opacity:1}.pe-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pe-menu h4{margin:18px 4px 8px;font-size:11px;letter-spacing:.1em;color:#7d7d86}
.pe-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pe-menu-grid a{padding:14px 12px;border-radius:16px;background:#141417;border:1px solid #232328;color:#eee;text-decoration:none;font-size:14px;font-weight:600}.pe-menu-grid a.on{border-color:#ff697c}
/* The dock on the other creator pages (phones only). */
.pe-dock-wrap{display:none}
@media (max-width:760px){
 .pe-dock-wrap{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:linear-gradient(#08080a00,#08080af0 35%)}
 body.has-pe-dock .workspace-content,body.has-pe-dock #suite{padding-bottom:110px}
 body.has-pe-dock .floating-ai{bottom:96px!important}
}
@media (prefers-reduced-motion:reduce){.pe-sheet,.pe-edit,.pe-edit-in,.pe-menu{transition:none}.pe-pop,.pe-hint{animation:none}}
.pe .vn-warning{position:absolute;top:64px;left:12px;right:12px;z-index:21;margin:0;background:#1d1a10f2}
