/* Wonda Playground — full UI (ERT/QR style) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:16px;overflow-x:clip}
body.pg-body{height:100vh;display:flex;flex-direction:column;overflow:hidden;padding:0;margin:0}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#f1f5f9;color:#14295d;line-height:1.55;font-variant-numeric:tabular-nums;overflow-x:clip;max-width:100%;height:100vh;display:flex;flex-direction:column}
img,video,canvas,svg{max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:root{
  --navy:#14295d;--navy-2:#0a1f44;--navy-3:#1e1e5a;
  --blue:#2979ff;--blue-2:#1e63d6;--blue-soft:#eaf2ff;
  --ink:#1b2d5c;--txt:#14295d;--txt-2:#5c6a88;--txt-3:#7c8aa8;--txt-4:#96a1b8;
  --line:#d8dfec;--line-2:#eef2f9;--bg:#f1f5f9;--bg-2:#f7f9fc;--bg-3:#fbfcfe;
  --accent:#22a84a;--accent-2:#1a8a3c;--danger:#c82333;--danger-soft:#fef2f2;
  --warning:#f0a020;
  --topbar-h:56px;
  --mobile-nav-h:60px;
}

/* ═══════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════ */
.pg-topbar{
  background:var(--navy);color:#fff;height:var(--topbar-h);
  display:flex;align-items:center;gap:16px;padding:0 16px;
  border-bottom:1px solid var(--navy-2);flex:0 0 auto;z-index:50;position:relative;
}
.pg-brand{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  text-decoration:none;color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.04em;
}
.pg-brand__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;background:var(--navy-2);color:var(--blue);
  font-size:.95rem;border-radius:8px;
}
.pg-brand__name{display:none}
@media (min-width:520px){ .pg-brand__name{display:inline} }
.pg-brand__name em{
  font-style:normal;color:#6aa0ff;font-weight:700;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;margin-left:4px;opacity:.85;
}
.pg-topbar__spacer{flex:1;min-width:0}

/* topbar action buttons */
.pg-actions{display:flex;gap:4px;align-items:center}
.pg-action{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;font-size:.68rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#c8d1e0;border-radius:6px;
  transition:background .12s,color .12s;white-space:nowrap;
  border:1px solid transparent;
}
.pg-action:hover{background:rgba(255,255,255,.08);color:#fff}
.pg-action i{font-size:.85rem}
.pg-action__label{display:none}
@media (min-width:1000px){ .pg-action__label{display:inline} }
.pg-action--primary{color:#fff;border-color:rgba(255,255,255,.22)}
.pg-action--primary:hover{background:var(--blue);border-color:var(--blue)}
.pg-action--danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.pg-action--ai.is-active{background:var(--blue);color:#fff;border-color:var(--blue)}
.pg-action-divider{width:1px;height:22px;background:rgba(255,255,255,.15);margin:0 4px}

/* ═══════════════════════════════════════════════
   MAIN WORKSPACE
   ═══════════════════════════════════════════════ */
.pg-workspace{
  flex:1;display:flex;min-height:0;position:relative;
  background:var(--bg);overflow:hidden;
}

/* ─── EDITOR PANE ─── */
.pg-editor{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border-right:1px solid var(--line);
  flex:0 0 auto;width:50%;position:relative;
}
.pg-editor__head{
  display:flex;align-items:center;gap:0;
  background:var(--bg-2);border-bottom:1px solid var(--line);
  flex:0 0 auto;min-height:44px;padding-right:8px;
}
.pg-tabs{display:flex;flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pg-tab{
  background:transparent;border:none;padding:11px 18px;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-2);border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:.12s;flex:0 0 auto;
}
.pg-tab i{font-size:.9rem}
.pg-tab:hover{color:var(--navy);background:var(--bg-3)}
.pg-tab.is-active{color:var(--navy);border-bottom-color:var(--blue);background:#fff}
.pg-tab__dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--blue);margin-left:2px;opacity:.9;
}
.pg-editor__meta{
  display:flex;align-items:center;gap:10px;font-size:.66rem;
  color:var(--txt-3);font-family:ui-monospace,Menlo,monospace;
  letter-spacing:.02em;flex:0 0 auto;
}
.pg-editor__body{
  flex:1;min-height:0;position:relative;background:#282c34;
}
.pg-editor__body .CodeMirror{
  position:absolute;inset:0;height:100%!important;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:13px;line-height:1.55;
}
.pg-editor__body > textarea{display:none}

/* ─── SPLITTER ─── */
.pg-splitter{
  flex:0 0 6px;background:var(--bg);position:relative;cursor:col-resize;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  transition:background .12s;
}
.pg-splitter::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:2px;height:32px;background:var(--line);border-radius:2px;
  transition:.12s;
}
.pg-splitter:hover{background:var(--blue-soft)}
.pg-splitter:hover::after{background:var(--blue);height:48px}
.pg-splitter.is-dragging{background:var(--blue-soft)}
.pg-splitter.is-dragging::after{background:var(--blue);height:48px}

/* ─── PREVIEW PANE ─── */
.pg-preview{
  flex:1;display:flex;flex-direction:column;min-width:0;
  background:#fff;
}
.pg-preview__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--bg-2);border-bottom:1px solid var(--line);
  min-height:44px;padding:0 14px;flex:0 0 auto;
}
.pg-preview__title{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-2);
}
.pg-preview__title i{color:var(--blue)}
.pg-preview__actions{display:flex;gap:6px;align-items:center}
.pg-mini-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:6px;transition:.12s;
}
.pg-mini-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.pg-mini-btn i{font-size:.75rem}
.pg-mini-btn--primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.pg-mini-btn--primary:hover{background:var(--navy-3)}
.pg-viewport-toggle{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pg-viewport-toggle button{
  padding:6px 8px;font-size:.75rem;color:var(--txt-2);
  background:#fff;border-right:1px solid var(--line);transition:.12s;
}
.pg-viewport-toggle button:last-child{border-right:none}
.pg-viewport-toggle button:hover{background:var(--bg-2);color:var(--navy)}
.pg-viewport-toggle button.is-active{background:var(--navy);color:#fff}
.pg-preview__body{
  flex:1;min-height:0;display:flex;justify-content:center;
  background:repeating-conic-gradient(#eef2f9 0% 25%,#fff 0% 50%) 50%/14px 14px;
  overflow:hidden;padding:0;
}
#livePreview{
  width:100%;height:100%;border:none;background:#fff;
  transition:max-width .2s ease;
}
.pg-preview__body[data-viewport="tablet"] #livePreview{max-width:768px;box-shadow:0 0 24px rgba(0,0,0,.08)}
.pg-preview__body[data-viewport="mobile"] #livePreview{max-width:375px;box-shadow:0 0 24px rgba(0,0,0,.12)}

/* ═══════════════════════════════════════════════
   AI PANEL (slide-in from right on desktop)
   ═══════════════════════════════════════════════ */
.pg-ai{
  position:absolute;top:0;right:0;bottom:0;
  width:min(400px,100%);background:#fff;
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s ease;
  z-index:20;box-shadow:-4px 0 24px rgba(15,23,42,.08);
}
.pg-ai.is-open{transform:translateX(0)}
.pg-ai__head{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;background:var(--navy);color:#fff;
  flex:0 0 auto;min-height:52px;
}
.pg-ai__head i.fa-robot{color:#6aa0ff;font-size:1.1rem}
.pg-ai__head strong{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;flex:1;
}
.pg-ai__close{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  color:#c8d1e0;border-radius:6px;transition:.12s;
}
.pg-ai__close:hover{background:rgba(255,255,255,.1);color:#fff}
.pg-ai__body{
  flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg-2);
}
.pg-ai__messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.pg-ai__messages::-webkit-scrollbar{width:6px}
.pg-ai__messages::-webkit-scrollbar-thumb{background:var(--line)}
.pg-msg{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.pg-msg--user{flex-direction:row-reverse}
.pg-msg__avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-soft);color:var(--blue);font-size:.85rem;
}
.pg-msg--user .pg-msg__avatar{background:var(--navy);color:#fff}
.pg-msg__bubble{
  max-width:calc(100% - 48px);padding:10px 14px;
  background:#fff;border:1px solid var(--line-2);border-radius:12px;
  font-size:.86rem;line-height:1.55;color:var(--ink);
  word-wrap:break-word;overflow-wrap:break-word;
}
.pg-msg--user .pg-msg__bubble{background:var(--navy);color:#fff;border-color:var(--navy)}
.pg-msg__bubble p{margin:0 0 8px}
.pg-msg__bubble p:last-child{margin-bottom:0}
.pg-msg__bubble pre{
  background:var(--navy);color:#e2e8f0;padding:10px 12px;border-radius:6px;
  font-family:ui-monospace,Menlo,monospace;font-size:.78rem;line-height:1.5;
  overflow-x:auto;margin:8px 0;white-space:pre;
}
.pg-msg__bubble code{
  background:var(--blue-soft);padding:1px 6px;border-radius:4px;
  font-family:ui-monospace,Menlo,monospace;font-size:.85em;color:var(--blue-2);
}
.pg-msg--user .pg-msg__bubble code{background:rgba(255,255,255,.15);color:#fff}
.pg-msg__bubble strong{font-weight:700}
.pg-msg__bubble a{color:var(--blue);text-decoration:underline}

/* typing */
.pg-typing{display:flex;gap:10px;padding:0 16px 12px}
.pg-typing__avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-soft);color:var(--blue);font-size:.85rem;
}
.pg-typing__bubble{
  background:#fff;border:1px solid var(--line-2);border-radius:12px;
  padding:10px 14px;display:inline-flex;align-items:center;gap:6px;
  font-size:.82rem;color:var(--txt-2);
}
.pg-typing__bubble .dot{
  width:6px;height:6px;background:var(--blue);border-radius:50%;
  animation:pg-bounce 1.4s infinite both;
}
.pg-typing__bubble .dot:nth-child(2){animation-delay:.15s}
.pg-typing__bubble .dot:nth-child(3){animation-delay:.3s}
@keyframes pg-bounce{
  0%,80%,100%{transform:scale(.6);opacity:.5}
  40%{transform:scale(1);opacity:1}
}

/* AI composer */
.pg-ai__composer{
  flex:0 0 auto;border-top:1px solid var(--line);
  background:#fff;padding:12px 14px;
}
.pg-ai__input{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-family:inherit;font-size:.85rem;
  resize:none;outline:none;transition:border-color .12s;line-height:1.45;
  color:var(--navy);background:#fff;max-height:120px;
}
.pg-ai__input:focus{border-color:var(--blue)}
.pg-ai__input-footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;gap:8px;
}
.pg-ai__hint{
  font-size:.65rem;color:var(--txt-3);font-family:ui-monospace,Menlo,monospace;
}
.pg-ai__send{
  background:var(--navy);color:#fff;padding:9px 16px;border-radius:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;transition:.12s;
}
.pg-ai__send:hover{background:var(--navy-3)}
.pg-ai__send:disabled{opacity:.5;cursor:not-allowed}
.pg-ai__send i{font-size:.85rem}

/* ═══════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════ */
.pg-modal-bg{
  position:fixed;inset:0;background:rgba(10,31,68,.55);
  z-index:1000;display:none;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(3px);
}
.pg-modal-bg.is-open{display:flex}
.pg-modal{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  max-width:460px;width:100%;padding:24px;
  box-shadow:0 24px 60px -12px rgba(10,31,68,.4);
  animation:pg-modal-in .18s ease;
}
@keyframes pg-modal-in{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.pg-modal__icon{
  width:48px;height:48px;margin:0 auto 16px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.3rem;background:var(--blue-soft);color:var(--blue);
}
.pg-modal__icon--danger{background:var(--danger-soft);color:var(--danger)}
.pg-modal__icon--warning{background:#fef3c7;color:#b45309}
.pg-modal h3{
  font-size:1.05rem;font-weight:700;color:var(--navy);
  text-align:center;margin:0 0 8px;letter-spacing:-.01em;
}
.pg-modal p{
  font-size:.86rem;color:var(--txt-2);text-align:center;line-height:1.55;margin:0 0 22px;
}
.pg-modal p strong{color:var(--navy);font-weight:700}
.pg-modal__actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pg-modal__btn{
  padding:11px 20px;border-radius:8px;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid;transition:.12s;
  display:inline-flex;align-items:center;gap:6px;min-width:110px;justify-content:center;
}
.pg-modal__btn--cancel{background:#fff;color:var(--navy);border-color:var(--line)}
.pg-modal__btn--cancel:hover{background:var(--bg-2)}
.pg-modal__btn--confirm{background:var(--navy);color:#fff;border-color:var(--navy)}
.pg-modal__btn--confirm:hover{background:var(--navy-3)}
.pg-modal__btn--danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.pg-modal__btn--danger:hover{background:#a01a28;border-color:#a01a28}

/* ═══════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════ */
.pg-mobile-nav{display:none}

@media (max-width:900px){
  .pg-workspace{flex-direction:column}
  .pg-editor{width:100%!important;border-right:none;border-bottom:none}
  .pg-splitter{display:none}
  .pg-preview{display:none}
  body.pg-pane-preview .pg-editor{display:none}
  body.pg-pane-preview .pg-preview{display:flex;flex:1}
  .pg-ai{
    position:fixed;top:var(--topbar-h);left:0;right:0;bottom:var(--mobile-nav-h);
    width:auto;max-width:none;
    transform:translateY(100%);border-left:none;border-top:1px solid var(--line);
  }
  .pg-ai.is-open{transform:translateY(0)}
  body.pg-ai-open .pg-mobile-nav{display:none}

  .pg-mobile-nav{
    display:flex;background:#fff;border-top:1px solid var(--line);
    height:var(--mobile-nav-h);flex:0 0 auto;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .pg-mobile-nav button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--txt-3);border-top:3px solid transparent;transition:.12s;
    padding-top:4px;
  }
  .pg-mobile-nav button i{font-size:1.1rem}
  .pg-mobile-nav button:hover{color:var(--navy);background:var(--bg-2)}
  .pg-mobile-nav button.is-active{
    color:var(--navy);border-top-color:var(--blue);background:var(--blue-soft);
  }
}

@media (max-width:520px){
  .pg-brand__name em{display:none}
  .pg-action{padding:7px 10px}
  .pg-action__label{display:none}
}

/* utility */
.hidden{display:none!important}

/* ═══════════════════════════════════════════════
   v7 — AI floating widget + layout fixes
   ═══════════════════════════════════════════════ */

/* Bare body = full screen flex column: topbar / workspace / footer */
body.pg-body{
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
  margin:0;
}

/* workspace fills remaining space */
.pg-workspace{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  position:relative;
}

/* editor and preview must fill their panes */
.pg-editor,
.pg-preview{
  height:100%;
}

/* ─── AI: floating widget bottom-right ─── */
.pg-ai{
  position:fixed;
  bottom:20px;
  right:20px;
  top:auto;
  left:auto;
  width:min(400px, calc(100vw - 40px));
  height:min(600px, calc(100vh - 140px));
  max-height:calc(100vh - 140px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  transform:translateY(20px) scale(.96);
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease, opacity .22s ease;
  z-index:100;
  box-shadow:0 20px 48px -12px rgba(10,31,68,.35), 0 0 0 1px rgba(10,31,68,.04);
}
.pg-ai.is-open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}

/* head */
.pg-ai__head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--navy);
  color:#fff;
  border-radius:14px 14px 0 0;
  flex:0 0 auto;
  min-height:52px;
}
.pg-ai__head i.fa-robot{color:#6aa0ff;font-size:1.1rem}
.pg-ai__head strong{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;flex:1;
}
.pg-ai__close{
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#c8d1e0;border-radius:6px;transition:.12s;
}
.pg-ai__close:hover{background:rgba(255,255,255,.12);color:#fff}

/* body */
.pg-ai__body{
  flex:1;min-height:0;display:flex;flex-direction:column;
  background:var(--bg-2);
  overflow:hidden;
}
.pg-ai__messages{
  flex:1;overflow-y:auto;
  padding:16px;
  display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.pg-ai__messages::-webkit-scrollbar{width:6px}
.pg-ai__messages::-webkit-scrollbar-thumb{background:var(--line)}

/* composer */
.pg-ai__composer{
  flex:0 0 auto;
  border-top:1px solid var(--line);
  background:#fff;
  padding:12px 14px;
  border-radius:0 0 14px 14px;
}

/* ─── FAB when AI is closed ─── */
.pg-ai-fab{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:1.3rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 24px -4px rgba(10,31,68,.35);
  z-index:100;
  transition:transform .12s, background .12s;
  border:none;
}
.pg-ai-fab:hover{
  background:var(--navy-3);
  transform:translateY(-2px);
}
.pg-ai-fab i{color:#6aa0ff}

/* ─── footer (bare layout) ─── */
.pg-footer{
  flex:0 0 auto;
  background:var(--navy);
  color:#8ba0c4;
  font-size:.72rem;
  padding:10px 20px;
  border-top:1px solid var(--navy-2);
}
.pg-footer__inner{
  max-width:1600px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.pg-footer a{color:#c8d1e0;transition:.12s}
.pg-footer a:hover{color:#fff;text-decoration:underline}

/* ─── MOBILE — AI becomes full sheet ─── */
@media (max-width:900px){
  .pg-ai{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100%;
    max-width:none;
    height:auto;
    max-height:none;
    border-radius:0;
    border:none;
    transform:translateY(100%);
    opacity:1;
  }
  .pg-ai.is-open{transform:translateY(0)}
  .pg-ai__head{border-radius:0;min-height:56px;padding:14px 16px}
  .pg-ai__composer{border-radius:0;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .pg-ai-fab{bottom:80px;right:16px}
  body.pg-ai-open .pg-mobile-nav{display:none}
}

/* ═══════════════════════════════════════════════
   v9 — hard flex chain: body → main → topbar/workspace/footer
   ═══════════════════════════════════════════════ */

body.pg-body{
  height:100vh !important;
  max-height:100vh !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
}

/* main is the flex container between topbar and footer */
body.pg-body > main{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
}

/* topbar fixed height */
body.pg-body .pg-topbar{
  flex:0 0 auto !important;
  height:56px !important;
  min-height:56px !important;
}

/* workspace fills what's left */
body.pg-body .pg-workspace{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:row !important;
}

/* editor and preview children of workspace */
body.pg-body .pg-editor,
body.pg-body .pg-preview{
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

body.pg-body .pg-editor{ flex:0 0 auto !important; width:50%; }
body.pg-body .pg-preview{ flex:1 1 auto !important; min-width:0 !important; }

body.pg-body .pg-editor__body,
body.pg-body .pg-preview__body{
  flex:1 1 auto !important;
  min-height:0 !important;
}

/* footer pinned */
body.pg-body .pg-footer{
  flex:0 0 auto !important;
}

/* mobile nav (hidden on desktop but flex-when-shown) */
body.pg-body .pg-mobile-nav{
  flex:0 0 auto !important;
}

/* mobile: workspace stacks */
@media (max-width:900px){
  body.pg-body .pg-workspace{
    flex-direction:column !important;
  }
  body.pg-body .pg-editor,
  body.pg-body .pg-preview{
    width:100% !important;
    flex:1 1 auto !important;
  }
}

/* ═══════════════════════════════════════════════
   v11 — grouped actions, editor head buttons, green Run
   ═══════════════════════════════════════════════ */

/* ── topbar action groups ── */
.pg-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.pg-action-group{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px;
  background:rgba(255,255,255,.05);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
}
.pg-action-group .pg-action{
  border-radius:6px;
  padding:7px 11px;
}
.pg-action-group .pg-action:hover{
  background:rgba(255,255,255,.14);
}
.pg-action-divider{
  width:1px;
  height:22px;
  background:rgba(255,255,255,.12);
  margin:0 2px;
}

/* ── editor head: right-side action group ── */
.pg-editor__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-right:8px;
}
.pg-editor__actions{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.pg-editor__actions .pg-mini-btn{
  padding:6px 10px;
  font-size:.62rem;
}

/* ── preview head: green Run button ── */
.pg-mini-btn--primary{
  background:#16a34a !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
.pg-mini-btn--primary:hover{
  background:#15803d !important;
  border-color:#15803d !important;
}

/* ── responsive: hide labels on narrow screens ── */
@media (max-width:1180px){
  .pg-action__label{display:none}
  .pg-action{padding:8px 10px}
  .pg-mini-btn__label{display:none}
}
@media (max-width:900px){
  .pg-action-group{padding:0;background:transparent;border:none;gap:4px}
}

/* ── on mobile, editor actions stay visible ── */
@media (max-width:520px){
  .pg-editor__actions .pg-mini-btn{padding:5px 8px}
}

/* ═══════════════════════════════════════════════
   v12 — editor readability: brighter line numbers + richer syntax colors
   ═══════════════════════════════════════════════ */

/* CodeMirror wrapper fills the pane */
.CodeMirror{
  height:100% !important;
  background:#1a1d29 !important;
  color:#e2e8f0 !important;
  font-size:13.5px !important;
  line-height:1.6 !important;
}
.CodeMirror-gutters{
  background:#151824 !important;
  border-right:1px solid #2a2f42 !important;
}
.CodeMirror-linenumber{
  color:#8b95b0 !important;   /* was too dim — now clearly readable */
  padding:0 12px 0 8px !important;
  font-size:12.5px !important;
}
.CodeMirror-cursor{
  border-left:2px solid #6aa0ff !important;
}
.CodeMirror-selected{
  background:rgba(106,160,255,.18) !important;
}
.CodeMirror-activeline-background{
  background:rgba(106,160,255,.05) !important;
}

/* ── syntax tokens ── */
.cm-s-material-darker.CodeMirror                     { color:#e2e8f0; }
.cm-s-material-darker .cm-keyword                    { color:#c792ea; font-weight:600; }
.cm-s-material-darker .cm-atom                       { color:#f78c6c; }
.cm-s-material-darker .cm-number                     { color:#f78c6c; }
.cm-s-material-darker .cm-def                        { color:#82aaff; }
.cm-s-material-darker .cm-variable                   { color:#e2e8f0; }
.cm-s-material-darker .cm-variable-2                 { color:#7dd3fc; }
.cm-s-material-darker .cm-variable-3,
.cm-s-material-darker .cm-type                       { color:#c792ea; }
.cm-s-material-darker .cm-property                   { color:#7dd3fc; }
.cm-s-material-darker .cm-operator                   { color:#89ddff; }
.cm-s-material-darker .cm-comment                    { color:#6b7a99; font-style:italic; }
.cm-s-material-darker .cm-string                     { color:#c3e88d; }
.cm-s-material-darker .cm-string-2                   { color:#c3e88d; }
.cm-s-material-darker .cm-meta                       { color:#f78c6c; }
.cm-s-material-darker .cm-qualifier                  { color:#f78c6c; }
.cm-s-material-darker .cm-builtin                    { color:#82aaff; }
.cm-s-material-darker .cm-bracket                    { color:#89ddff; }
.cm-s-material-darker .cm-tag                        { color:#f07178; }
.cm-s-material-darker .cm-attribute                  { color:#ffcb6b; }
.cm-s-material-darker .cm-hr                         { color:#6b7a99; }
.cm-s-material-darker .cm-link                       { color:#82aaff; text-decoration:underline; }
.cm-s-material-darker .cm-error                      { color:#ff5370; background:rgba(255,83,112,.12); }
.cm-s-material-darker .cm-header                     { color:#82aaff; }
.cm-s-material-darker .cm-quote                      { color:#c3e88d; font-style:italic; }

/* active line number highlight */
.CodeMirror-activeline .CodeMirror-linenumber{
  color:#c8d1e0 !important;
  font-weight:700;
}

/* matching bracket highlight */
.CodeMirror-matchingbracket{
  background:rgba(106,160,255,.15) !important;
  color:#6aa0ff !important;
  outline:1px solid rgba(106,160,255,.4);
  font-weight:700;
}
.CodeMirror-nonmatchingbracket{
  color:#ff5370 !important;
}

/* ═══════════════════════════════════════════════
   v13 — chat v2: code toolbar, typewriter cursor
   ═══════════════════════════════════════════════ */

/* code block wrapper with header toolbar */
.pg-code{
  margin:12px 0;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #0a1f44;
  background:#0a1f44;
}
.pg-code__head{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background:#0a1f44;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pg-code__lang{
  flex:1;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8ba0c4;
  font-family:ui-monospace,Menlo,monospace;
}
.pg-code__btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#c8d1e0;
  border-radius:5px;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
  font-family:inherit;
  white-space:nowrap;
}
.pg-code__btn:hover{
  background:rgba(255,255,255,.15);
  color:#fff;
  border-color:rgba(255,255,255,.3);
}
.pg-code__btn i{font-size:.72rem}
.pg-code__btn.is-ok{
  background:rgba(22,163,74,.3);
  border-color:#16a34a;
  color:#fff;
}
.pg-code__btn--insert{
  background:rgba(41,121,255,.18);
  border-color:rgba(41,121,255,.45);
  color:#a8c8ff;
}
.pg-code__btn--insert:hover{
  background:rgba(41,121,255,.35);
  border-color:#2979ff;
  color:#fff;
}

/* the pre inside the wrapper */
.pg-code pre{
  margin:0 !important;
  padding:12px 14px !important;
  background:#14295d !important;
  border-radius:0 !important;
  max-height:360px;
  overflow:auto;
  font-size:.78rem;
  line-height:1.55;
  white-space:pre;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
}
.pg-code pre::-webkit-scrollbar{width:6px;height:6px}
.pg-code pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}

/* typewriter cursor */
.pg-msg__bubble.is-typing::after{
  content:'▋';
  display:inline-block;
  margin-left:2px;
  color:#6aa0ff;
  animation:pg-blink 1s steps(2) infinite;
  vertical-align:middle;
  font-weight:400;
}
@keyframes pg-blink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}

/* subtle message entrance */
.pg-msg{animation:pg-msg-in .18s ease}
@keyframes pg-msg-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* user message stays readable */
.pg-msg--user .pg-msg__bubble{white-space:pre-wrap;word-break:break-word}

/* code inline still highlighted */
.pg-msg__bubble code{
  background:var(--blue-soft);
  padding:1px 6px;
  border-radius:4px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:.85em;
  color:var(--blue-2);
}
.pg-msg--user .pg-msg__bubble code{background:rgba(255,255,255,.15);color:#fff}

/* block-level code should never be styled like inline */
.pg-msg__bubble .pg-code code{
  background:transparent !important;
  padding:0 !important;
  color:inherit !important;
  font-size:inherit !important;
  border-radius:0 !important;
}

/* v15 — FAB never overlaps open AI panel */
.pg-ai          { z-index: 200 !important; }
.pg-ai-fab      { z-index: 150 !important; }
.pg-ai-fab[hidden] { display: none !important; }

/* if the panel has is-open, force FAB hidden even if JS is slow */
body.pg-ai-open .pg-ai-fab{
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════
   v16 — FAB controlled 100% by body class
   ═══════════════════════════════════════════════ */

/* Default: hidden (matches desktop auto-open state) */
.pg-ai-fab{
  display:none !important;
}

/* Visible ONLY when panel is closed */
body.pg-ai-closed .pg-ai-fab{
  display:inline-flex !important;
  opacity:1 !important;
  pointer-events:auto !important;
  animation:pg-fab-in .2s ease;
}

/* Explicitly never show when panel is open */
body.pg-ai-open .pg-ai-fab{
  display:none !important;
}

@keyframes pg-fab-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═══════════════════════════════════════════════
   v17 — FAB is 100% JS-controlled. No CSS rules fight it.
   ═══════════════════════════════════════════════ */

/* Reset any previous rules — JS inline style wins */
.pg-ai-fab{
  /* base styling only, no display rule */
  position:fixed !important;
  bottom:20px !important;
  right:20px !important;
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  background:var(--navy) !important;
  color:#fff !important;
  font-size:1.3rem !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 8px 24px -4px rgba(10,31,68,.35) !important;
  z-index:250 !important;
  border:none !important;
  transition:transform .12s, background .12s !important;
}
.pg-ai-fab:hover{
  background:var(--navy-3) !important;
  transform:translateY(-2px) !important;
}
.pg-ai-fab i{color:#6aa0ff !important}

/* Kill any prior [hidden] or body-class rules from v15/v16 */
.pg-ai-fab[hidden]{display:none !important}
body.pg-ai-open  .pg-ai-fab,
body.pg-ai-closed .pg-ai-fab{ /* no rule — let inline style win */ }

/* Mobile: FAB sits above bottom nav */
@media (max-width:900px){
  .pg-ai-fab{bottom:80px !important;right:16px !important}
}

/* ═══════════════════════════════════════════════
   v22 — multi-file tabs
   ═══════════════════════════════════════════════ */

.pg-file-tabs{
  display:flex;
  flex:1;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  -webkit-overflow-scrolling:touch;
}
.pg-file-tabs::-webkit-scrollbar{height:3px}
.pg-file-tabs::-webkit-scrollbar-thumb{background:var(--line)}

.pg-file-tab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:11px 10px 11px 14px;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--txt-2);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
  white-space:nowrap;
  flex:0 0 auto;
  max-width:200px;
  position:relative;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.pg-file-tab:hover{background:var(--bg-3);color:var(--navy)}
.pg-file-tab.is-active{
  color:var(--navy);
  border-bottom-color:var(--blue);
  background:#fff;
}
.pg-file-tab i.fa-file{
  font-size:.85rem;
  color:var(--txt-3);
  flex:0 0 auto;
}
.pg-file-tab.is-active i.fa-file{color:var(--blue)}
.pg-file-tab i.fa-html5{color:#e34f26}
.pg-file-tab i.fa-css3-alt{color:#1572b6}
.pg-file-tab i.fa-square-js{color:#f7df1e}
.pg-file-tab__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:130px;
}
.pg-file-tab__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:2px;
  border-radius:3px;
  color:var(--txt-3);
  font-size:.65rem;
  cursor:pointer;
  transition:background .12s,color .12s;
  flex:0 0 auto;
  background:transparent;
  border:none;
  padding:0;
}
.pg-file-tab__close:hover{background:rgba(200,35,51,.12);color:var(--danger)}
.pg-file-tab__input{
  border:none;
  background:transparent;
  color:var(--navy);
  font-size:.7rem;
  font-weight:600;
  font-family:inherit;
  padding:0;
  outline:none;
  width:110px;
  min-width:60px;
}

/* the editor body fills remaining space */
.pg-editor__body{
  flex:1;
  min-height:0;
  position:relative;
  background:#1a1d29;
}
.pg-editor__body .CodeMirror{
  position:absolute;
  inset:0;
  height:100%!important;
}

/* new-file modal input */
.pg-modal__field{
  margin:16px 0 20px;
  text-align:left;
}
.pg-modal__field label{
  display:block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:6px;
}
.pg-modal__field input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:.85rem;
  color:var(--navy);
  outline:none;
}
.pg-modal__field input:focus{border-color:var(--blue)}
.pg-modal__hint{
  font-size:.7rem;
  color:var(--txt-3);
  margin-top:6px;
  font-style:italic;
}

/* ═══════════════════════════════════════════════
   v23 — share modal
   ═══════════════════════════════════════════════ */

.pg-modal--share{max-width:520px}

.pg-share-url{
  display:flex;
  gap:6px;
  margin:18px 0 12px;
}
.pg-share-url input{
  flex:1;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.82rem;
  color:var(--navy);
  background:var(--bg-2);
  outline:none;
  min-width:0;
}
.pg-share-url input:focus{border-color:var(--blue);background:#fff}
.pg-share-url button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:11px 18px;
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
  border-radius:6px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .12s;
  white-space:nowrap;
  flex:0 0 auto;
}
.pg-share-url button:hover{background:var(--navy-3)}
.pg-share-url button.is-ok{background:#16a34a;border-color:#16a34a}
.pg-share-url button i{font-size:.85rem}

.pg-share-meta{
  font-size:.72rem;
  color:var(--txt-3);
  text-align:center;
  padding:8px 0 4px;
  font-family:ui-monospace,Menlo,monospace;
  letter-spacing:.02em;
  border-top:1px solid var(--line-2);
  margin-top:10px;
}
.pg-share-meta b{color:var(--navy);font-weight:700}

/* saving state */
.pg-modal--share.is-saving .pg-modal__icon{
  background:var(--blue-soft);
  color:var(--blue);
}
.pg-modal--share.is-saving .pg-modal__icon i{
  animation:pg-spin 1s linear infinite;
}
@keyframes pg-spin{to{transform:rotate(360deg)}}

/* error state */
.pg-modal--share.is-error .pg-modal__icon{
  background:var(--danger-soft);
  color:var(--danger);
}
.pg-modal--share.is-error .pg-share-url{display:none}

/* small phone */
@media (max-width:480px){
  .pg-share-url{flex-direction:column}
  .pg-share-url button{justify-content:center}
}

/* ═══════════════════════════════════════════════
   v24 — share viewer
   ═══════════════════════════════════════════════ */

.pg-share-banner{
  flex:0 0 auto;
  background:linear-gradient(90deg, #0F0F2D 0%, #1e1e5a 100%);
  color:#fff;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--navy-3);
  font-size:.75rem;
}
.pg-share-banner__info{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
  flex-wrap:wrap;
}
.pg-share-banner__info i.fa-link{color:#6aa0ff;font-size:.9rem}
.pg-share-banner__info strong{color:#fff;font-weight:700}
.pg-share-banner__sep{color:#4a5877;font-weight:700}
.pg-share-banner__slug{
  font-family:ui-monospace,Menlo,monospace;
  color:#c8d1e0;
  background:rgba(255,255,255,.06);
  padding:2px 8px;
  border-radius:4px;
  font-size:.72rem;
}
.pg-share-banner__actions{display:flex;gap:8px;flex-wrap:wrap}
.pg-share-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:6px;
  cursor:pointer;
  transition:.12s;
  white-space:nowrap;
  font-family:inherit;
}
.pg-share-btn--ghost{
  background:rgba(255,255,255,.08);
  color:#c8d1e0;
  border-color:rgba(255,255,255,.15);
}
.pg-share-btn--ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.pg-share-btn--accent{
  background:#16a34a;
  color:#fff;
  border-color:#16a34a;
}
.pg-share-btn--accent:hover{background:#15803d;border-color:#15803d}
.pg-share-btn i{font-size:.85rem}

/* readonly workspace needs to fill remaining height */
body.pg-body .pg-workspace--readonly{
  flex:1 1 auto !important;
  min-height:0 !important;
}

/* clone toast */
.pg-clone-note{
  position:fixed;
  top:80px;
  left:50%;
  transform:translateX(-50%);
  background:var(--navy);
  color:#fff;
  padding:12px 20px;
  border-radius:8px;
  font-size:.85rem;
  z-index:9999;
  box-shadow:0 12px 32px -8px rgba(10,31,68,.4);
  animation:pg-msg-in .2s ease;
}

/* missing snippet page */
.pg-missing{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background:var(--bg);
}
.pg-missing__card{
  background:#fff;
  border:1px solid var(--line);
  padding:48px 40px;
  max-width:520px;
  width:100%;
  text-align:center;
}
.pg-missing__icon{
  width:64px;height:64px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--danger-soft);color:var(--danger);
  margin-bottom:20px;
  border:1px solid #fecaca;
  font-size:1.6rem;
}
.pg-missing h1{
  font-size:1.4rem;font-weight:800;letter-spacing:-.02em;
  color:var(--navy);margin:0 0 12px;
}
.pg-missing p{
  color:var(--txt-2);font-size:.9rem;line-height:1.6;margin:0 0 8px;
}
.pg-missing code{
  background:var(--bg-2);
  padding:2px 6px;
  border-radius:4px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:.85em;
  color:var(--navy);
}
.pg-missing__hint{font-size:.78rem;color:var(--txt-3);margin-top:14px !important}
.pg-missing .btn{margin-top:24px}

@media (max-width:640px){
  .pg-share-banner{padding:10px 14px;gap:10px}
  .pg-share-banner__info{font-size:.7rem}
  .pg-share-banner__slug{display:none}
  .pg-share-banner__actions{width:100%;flex-direction:column}
  .pg-share-btn{justify-content:center;padding:10px 14px}
  .pg-missing__card{padding:32px 24px}
}

/* ═══════════════════════════════════════════════
   v25 — file tree sidebar (VS Code style)
   ═══════════════════════════════════════════════ */

/* workspace becomes: [tree] [editor] [splitter] [preview] */
.pg-tree{
  flex:0 0 220px;
  min-width:0;
  background:#151824;
  border-right:1px solid #0a1f44;
  display:flex;
  flex-direction:column;
  transition:flex-basis .18s ease, width .18s ease;
  overflow:hidden;
}
.pg-tree.is-collapsed{
  flex-basis:0;
  border-right:none;
}

.pg-tree__head{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 12px;
  border-bottom:1px solid #0a1f44;
  color:#8ba0c4;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  flex:0 0 auto;
  min-height:44px;
}
.pg-tree__head i.fa-folder-tree{color:#6aa0ff;font-size:.85rem}
.pg-tree__title{flex:1}
.pg-tree__actions{display:flex;gap:2px}
.pg-tree__btn{
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#8ba0c4;border-radius:5px;font-size:.75rem;
  background:transparent;border:none;cursor:pointer;
  transition:background .12s,color .12s;
}
.pg-tree__btn:hover{background:rgba(255,255,255,.08);color:#fff}

.pg-tree__body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:6px 0 12px;
  scrollbar-width:thin;
  scrollbar-color:#2a2f42 transparent;
}
.pg-tree__body::-webkit-scrollbar{width:6px}
.pg-tree__body::-webkit-scrollbar-thumb{background:#2a2f42}
.pg-tree__body::-webkit-scrollbar-thumb:hover{background:#3a4055}

.pg-tree__item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px 7px 10px;
  color:#c8d1e0;
  font-size:.76rem;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  cursor:pointer;
  transition:background .1s,color .1s;
  user-select:none;
  position:relative;
  border-left:2px solid transparent;
}
.pg-tree__item:hover{background:rgba(255,255,255,.05);color:#fff}
.pg-tree__item.is-active{
  background:rgba(41,121,255,.14);
  color:#fff;
  border-left-color:#2979ff;
}
.pg-tree__item i.file-icon{
  font-size:.85rem;
  flex:0 0 14px;
  text-align:center;
}
.pg-tree__item i.fa-html5{color:#e34f26}
.pg-tree__item i.fa-css3-alt{color:#1572b6}
.pg-tree__item i.fa-square-js{color:#f7df1e}
.pg-tree__item i.fa-file{color:#8ba0c4}
.pg-tree__item.is-active i.fa-file{color:#6aa0ff}

.pg-tree__name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pg-tree__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  opacity:0;
  color:#8ba0c4;
  border-radius:3px;
  transition:opacity .12s,background .12s,color .12s;
  font-size:.65rem;
  flex:0 0 auto;
}
.pg-tree__item:hover .pg-tree__close{opacity:1}
.pg-tree__close:hover{background:rgba(200,35,51,.2);color:#ff5370}

/* toggle button in topbar */
.pg-action--tree-icon{position:relative}
.pg-action--tree-icon.is-active{
  background:var(--blue);color:#fff;border-color:var(--blue);
}

/* hide tree on mobile by default (drawer behavior below) */
@media (max-width:900px){
  .pg-tree{
    position:fixed;
    top:var(--topbar-h);
    left:0;
    bottom:var(--mobile-nav-h);
    width:min(280px, 82vw);
    z-index:100;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.25);
    flex-basis:auto;
  }
  .pg-tree.is-open{transform:translateX(0)}
  .pg-tree.is-collapsed{transform:translateX(-100%);flex-basis:auto;width:min(280px,82vw)}
  body.pg-tree-open::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(10,31,68,.5);
    z-index:99;
    animation:pg-msg-in .15s ease;
  }
}

/* show on desktop only via js toggle */
body.pg-no-tree .pg-tree{flex-basis:0;border-right:none}

/* ═══════════════════════════════════════════════
   v26 — Open popover + drag-drop overlay
   ═══════════════════════════════════════════════ */

.pg-open-wrap{position:relative;display:inline-flex}
.pg-open-caret{
  font-size:.6rem !important;
  opacity:.6;
  margin-left:-2px;
}

.pg-open-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:260px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 12px 32px -8px rgba(10,31,68,.28);
  padding:6px;
  z-index:300;
  animation:pg-msg-in .12s ease;
}
.pg-open-menu[hidden]{display:none}

.pg-open-menu__item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  padding:10px 12px;
  background:transparent;
  border:none;
  border-radius:6px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:background .12s;
}
.pg-open-menu__item:hover{background:var(--blue-soft)}
.pg-open-menu__item > i{
  flex:0 0 auto;
  width:22px;
  text-align:center;
  font-size:.95rem;
  color:var(--blue);
  margin-top:2px;
}
.pg-open-menu__item > span{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.pg-open-menu__item strong{
  font-size:.78rem;
  font-weight:700;
  color:var(--navy);
}
.pg-open-menu__item em{
  font-size:.68rem;
  font-style:normal;
  color:var(--txt-3);
  line-height:1.35;
}

/* drag-drop overlay */
.pg-drop-overlay{
  position:fixed;
  inset:0;
  z-index:900;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,31,68,.75);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.pg-drop-overlay.is-active{display:flex}
.pg-drop-overlay__card{
  background:#fff;
  padding:40px 56px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 24px 60px -12px rgba(10,31,68,.4);
  pointer-events:none;
}
.pg-drop-overlay__icon{
  font-size:2.6rem;
  color:var(--blue);
  margin-bottom:14px;
}
.pg-drop-overlay h3{
  font-size:1.1rem;
  font-weight:800;
  color:var(--navy);
  margin:0 0 6px;
  letter-spacing:-.02em;
}
.pg-drop-overlay p{
  font-size:.82rem;
  color:var(--txt-2);
  margin:0;
}
.pg-drop-overlay code{
  background:var(--bg-2);
  padding:2px 6px;
  border-radius:4px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:.85em;
}

/* mobile: popover anchors right */
@media (max-width:900px){
  .pg-open-menu{
    left:auto;
    right:0;
    min-width:min(280px, calc(100vw - 20px));
  }
}

/* ── v27: tree empty state ── */
.pg-tree__empty{
  padding:28px 14px 20px;
  text-align:center;
}
.pg-tree__empty-icon{
  font-size:2rem;
  color:#2a2f42;
  margin-bottom:12px;
}
.pg-tree__empty-title{
  font-size:.78rem;
  font-weight:700;
  color:#c8d1e0;
  margin-bottom:4px;
  letter-spacing:.02em;
}
.pg-tree__empty-sub{
  font-size:.68rem;
  color:#5c6a88;
  margin-bottom:18px;
  line-height:1.4;
}
.pg-tree__empty-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 14px;
  margin-bottom:8px;
  background:rgba(41,121,255,.1);
  color:#c8d1e0;
  border:1px solid rgba(41,121,255,.25);
  border-radius:6px;
  font-family:inherit;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  text-align:left;
  cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.pg-tree__empty-btn:hover{
  background:rgba(41,121,255,.22);
  color:#fff;
  border-color:rgba(41,121,255,.5);
}
.pg-tree__empty-btn i{
  width:16px;
  text-align:center;
  font-size:.85rem;
  color:#6aa0ff;
  flex:0 0 auto;
}
.pg-tree__empty-btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.08);
  color:#8ba0c4;
  margin-top:6px;
}
.pg-tree__empty-btn--ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.15);
  color:#c8d1e0;
}
.pg-tree__empty-btn--ghost i{color:#8ba0c4}

/* ═══════════════════════════════════════════════
   v27 — persistent tree toolbar
   ═══════════════════════════════════════════════ */

.pg-tree__toolbar{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1px;
  background:#0a1f44;
  border-bottom:1px solid #0a1f44;
  flex:0 0 auto;
}
.pg-tree__tool{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px 4px 9px;
  background:#151824;
  color:#8ba0c4;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:background .12s,color .12s;
}
.pg-tree__tool:hover{
  background:#1e2338;
  color:#fff;
}
.pg-tree__tool i{
  font-size:.95rem;
  color:#6aa0ff;
  transition:color .12s;
}
.pg-tree__tool:hover i{color:#fff}
.pg-tree__tool span{line-height:1}

/* when the tree is collapsed on desktop, hide the toolbar too */
.pg-tree.is-collapsed .pg-tree__toolbar{display:none}