/* dreamAI Playground v2 — desktop-first light theme, scoped to #pg-root */
#pg-root{--pg-accent:#18794e;--pg-accent-soft:rgba(24,121,78,.09);--pg-danger:#b42318;
  --pg-line:#ededed;--pg-soft:#f3f3f3;--pg-fog:#f9f9f9;--pg-text:#181818;--pg-mut:#5d5d5d;--pg-dim:#8f8f8f;
  --pg-blue:#2563eb;--pg-warn:#e0a13c;
  position:relative;display:flex;flex-direction:column;background:var(--pg-fog);color:var(--pg-text);
  height:var(--pg-h,calc(100dvh - 24px));min-height:480px;border-radius:0;
  font:14px/1.55 Manrope,system-ui,sans-serif}
#pg-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#pg-root button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
#pg-root a{color:inherit;text-decoration:none}
#pg-root input,#pg-root textarea,#pg-root select{font:inherit;color:var(--pg-text);background:#fff;border:1px solid var(--pg-line);border-radius:10px;padding:10px 12px;width:100%}
#pg-root input:focus,#pg-root textarea:focus,#pg-root select:focus{outline:none;border-color:var(--pg-accent)}
#pg-root ::selection{background:rgba(24,121,78,.18)}
#pg-root .hidden{display:none!important}
#pg-root code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pg-msgs::-webkit-scrollbar,.pg-chatlist::-webkit-scrollbar,.pg-catalog::-webkit-scrollbar,.pg-drawer::-webkit-scrollbar{width:9px}
.pg-msgs::-webkit-scrollbar-thumb,.pg-chatlist::-webkit-scrollbar-thumb,.pg-catalog::-webkit-scrollbar-thumb,.pg-drawer::-webkit-scrollbar-thumb{background:#dcdcdc;border-radius:8px}

/* ===== header ===== */
.pg-head{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--pg-line);position:relative;z-index:30;flex:none}
.pg-head::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(#00000008,transparent);pointer-events:none}
.pg-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--pg-line);background:#fff;border-radius:10px;padding:7px 12px;font-size:13.5px;color:var(--pg-text)}
.pg-btn:hover{border-color:var(--pg-dim)}
a.pg-tab:hover{border-color:var(--pg-dim)}
.pg-tab{padding:7px 14px;border-radius:999px;font-size:13.5px;color:var(--pg-mut)}
.pg-tab.active{background:var(--pg-accent-soft);color:var(--pg-accent);font-weight:600}
.pg-pill{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--pg-accent-soft);color:var(--pg-accent);
  border:1px solid rgba(24,121,78,.25);padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600}
.pg-dot{width:9px;height:9px;border-radius:50%;background:#ccc;flex:none}
.pg-dot.ok{background:var(--pg-accent);box-shadow:0 0 0 3px var(--pg-accent-soft)}
.pg-dot.busy{background:var(--pg-warn);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
.pg-spacer{flex:1}

/* ===== layout shell ===== */
#pg-view-chat,#pg-view-models{flex:1;display:flex;flex-direction:column;min-height:0}

/* messages */
.pg-msgs{flex:1;overflow-y:auto;padding:22px 16px 10px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:920px;margin:0 auto}
.pg-hello{max-width:660px;margin:5vh auto 0;text-align:center;background:#fff;border:1px solid var(--pg-line);border-radius:16px;padding:26px 22px;color:var(--pg-mut)}
.pg-hello h2{color:var(--pg-text);margin:0 0 8px}
.msg-u,.msg-a{max-width:800px;width:100%;margin:0 auto;display:flex;flex-direction:column}
.msg-u{align-items:flex-end}
.pg-bub{padding:11px 15px;border-radius:16px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-size:15px}
.msg-u .pg-bub{background:var(--pg-accent-soft);border:1px solid rgba(24,121,78,.2);border-bottom-right-radius:5px;max-width:88%}
.msg-a .pg-bub{background:#fff;border:1px solid var(--pg-line);border-bottom-left-radius:5px;width:100%}
.pg-bub p{margin:.45em 0}.pg-bub p:first-child{margin-top:0}.pg-bub p:last-child{margin-bottom:0}
.pg-bub pre{background:#14171a;color:#e6e6e6;border-radius:10px;padding:12px;overflow-x:auto;font-size:13px;margin:0}
.pg-codecard{margin:.6em 0;border-radius:10px;overflow:hidden;border:1px solid var(--pg-line)}
.pg-codecard .pg-codehead{display:flex;justify-content:space-between;align-items:center;background:var(--pg-soft);padding:5px 12px;font-size:12px;color:var(--pg-mut)}
.pg-codecard pre{border-radius:0;margin:0}
.pg-bub code.inline{background:var(--pg-soft);padding:2px 6px;border-radius:6px;font-size:.92em}
.pg-copybtn{color:var(--pg-mut);font-size:12px}.pg-copybtn:hover{color:var(--pg-accent)}
.pg-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px;font-size:11.5px;color:var(--pg-dim)}
.pg-badge{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--pg-line);border-radius:999px;padding:2.5px 9px;white-space:nowrap}
.pg-badge.prov{color:var(--pg-accent);border-color:rgba(24,121,78,.35);background:var(--pg-accent-soft)}
.pg-badge.model{color:var(--pg-blue);border-color:rgba(37,99,235,.3)}
.pg-badge.fail{color:var(--pg-danger);border-color:rgba(180,35,24,.35)}
.pg-cursor{display:inline-block;width:8px;height:15px;background:var(--pg-accent);vertical-align:-2px;animation:pulse .9s infinite;border-radius:2px}

/* composer pinned to bottom */
.pg-composewrap{flex:none;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--pg-fog) 28%)}
.pg-composer{max-width:860px;margin:0 auto;display:flex;gap:8px;align-items:flex-end;background:#fff;border:1px solid var(--pg-line);border-radius:16px;padding:8px;box-shadow:0 4px 22px rgba(0,0,0,.05)}
.pg-composer:focus-within{border-color:var(--pg-accent)}
#pg-prompt{flex:1;border:none;background:none;resize:none;max-height:32vh;padding:8px 4px;line-height:1.45}
.pg-send{width:40px;height:40px;flex:none;border-radius:12px;background:var(--pg-accent);color:#fff;font-size:16px}
.pg-send.stop{background:var(--pg-danger)}
.pg-send:disabled{opacity:.4}
.pg-hint{text-align:center;font-size:11.5px;color:var(--pg-dim);margin-top:6px;min-height:14px}

/* catalog */
.pg-stats{display:flex;gap:10px;flex-wrap:wrap;padding:14px;max-width:1080px;margin:0 auto;width:100%}
.pg-stat{background:#fff;border:1px solid var(--pg-line);border-radius:12px;padding:10px 16px}
.pg-stat b{display:block;font-size:20px;color:var(--pg-accent)}
.pg-stat span{font-size:12px;color:var(--pg-mut)}
.pg-catalog{flex:1;overflow-y:auto;padding:4px 16px 46px;width:100%;max-width:1080px;margin:0 auto}
#pg-view-models > div{max-width:1080px;margin:0 auto;width:100%}
.pg-psec{margin:20px 0}
.pg-phead{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pg-phead h3{margin:0;font-size:16px;color:var(--pg-text)}
.pg-chip{font-size:11px;color:var(--pg-mut);border:1px solid var(--pg-line);background:#fff;padding:2px 10px;border-radius:999px}
.pg-chip.cap{color:var(--pg-accent);border-color:rgba(24,121,78,.3)}
.pg-chip.rpm{color:#b45309;border-color:rgba(180,83,9,.3)}
.pg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pg-mcard{background:#fff;border:1px solid var(--pg-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:.15s}
.pg-mcard:hover{border-color:var(--pg-accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.pg-mcard.active{border-color:var(--pg-accent);box-shadow:0 0 0 3px var(--pg-accent-soft)}
.pg-mname{font-weight:600;font-size:14px;word-break:break-all;display:flex;gap:6px;align-items:center}
.pg-star{color:var(--pg-warn)}
.pg-up{font-size:11.5px;color:var(--pg-dim);word-break:break-all}
.pg-chips{display:flex;flex-wrap:wrap;gap:5px}
.pg-mrow{display:flex;justify-content:space-between;font-size:12px;color:var(--pg-mut);gap:8px}
.pg-mrow b{color:var(--pg-text);font-weight:600;text-align:right}
.pg-use{margin-top:auto;font-size:12px;color:var(--pg-accent)}

/* drawers: mobile overlay by default */
.pg-drawer{position:fixed;z-index:80;background:#fff;box-shadow:-12px 0 50px rgba(0,0,0,.12);transition:transform .22s ease}
.pg-drawer.left{top:0;left:0;bottom:0;width:min(320px,88vw);transform:translateX(-104%);border-right:1px solid var(--pg-line);box-shadow:12px 0 50px rgba(0,0,0,.12)}
.pg-drawer.right{top:0;right:0;bottom:0;width:min(380px,94vw);transform:translateX(104%);border-left:1px solid var(--pg-line);overflow-y:auto}
.pg-drawer.open{transform:none}
.pg-dhead{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 10px}
.pg-dhead h3{margin:0;font-size:16px}
.pg-x{color:var(--pg-dim);font-size:17px;padding:6px 9px;border-radius:8px}
.pg-x:hover{background:var(--pg-soft)}
.pg-dbody{padding:0 14px 20px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 58px)}
.pg-newchat{width:100%;background:var(--pg-accent);color:#fff;border-radius:10px;padding:10px;font-weight:600}
.pg-newchat:hover{filter:brightness(1.06)}
.pg-chatlist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:2px;min-height:0}
.pg-citem{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:10px;border:1px solid transparent;cursor:pointer;color:var(--pg-text);font-size:14px;text-align:left;width:100%}
.pg-citem:hover{background:var(--pg-soft)}
.pg-citem.active{background:var(--pg-accent-soft);border-color:rgba(24,121,78,.2)}
.pg-citem .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-citem .del,.pg-citem .ren{opacity:0;font-size:12px;color:var(--pg-dim);padding:2px 4px;border-radius:6px}
.pg-citem:hover .del,.pg-citem:hover .ren{opacity:1}
.pg-citem .del:hover{color:var(--pg-danger)}.pg-citem .ren:hover{color:var(--pg-blue)}
.pg-field{display:block;margin:6px 0 12px;font-size:13px;color:var(--pg-mut)}
.pg-field.row output{float:right;color:var(--pg-accent);font-weight:600}
.pg-field .num{max-width:140px;margin-top:6px}
.pg-check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--pg-text);margin:10px 0}
.pg-check input{width:18px;height:18px;accent-color:var(--pg-accent)}
.pg-mini{font-size:12.5px;line-height:1.45;color:var(--pg-mut);margin-top:6px;display:block}
.pg-foot{margin-top:auto;border-top:1px solid var(--pg-line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.pg-btn.danger{color:var(--pg-danger);border-color:rgba(180,35,24,.3)}

/* key setup / misc */
.pg-keysetup{max-width:420px;margin:8vh auto;background:#fff;border:1px solid var(--pg-line);border-radius:16px;padding:24px}
.pg-keysetup .or{display:flex;align-items:center;gap:12px;color:var(--pg-dim);font-size:12px;margin:14px 0}
.pg-keysetup .or::before,.pg-keysetup .or::after{content:"";flex:1;height:1px;background:var(--pg-line)}
.pg-err{color:var(--pg-danger);font-size:13px;margin-top:8px}
#pg-toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(430px,92vw)}
.pg-toast{background:#fff;border:1px solid var(--pg-line);border-left:3px solid var(--pg-accent);border-radius:10px;padding:11px 14px;font-size:13.5px;box-shadow:0 12px 38px rgba(0,0,0,.14);animation:slideIn .2s ease}
.pg-toast.err{border-left-color:var(--pg-danger)}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}}

/* =============================================================
   DESKTOP: chats sidebar becomes a permanent left column
   ============================================================= */
@media(min-width:1100px){
  #pg-root{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .pg-head{grid-column:1/-1;grid-row:1}
  #pg-root .only-mobile{display:none!important}
  /* left drawer -> static sidebar */
  #pg-dr-chats{position:static;transform:none!important;grid-column:1;grid-row:2;
    width:auto;min-width:0;border-right:1px solid var(--pg-line);box-shadow:none;
    display:flex;flex-direction:column;background:#fff;overflow:hidden}
  #pg-dr-chats .pg-dhead{padding:14px 16px 8px}
  #pg-dr-chats .pg-x{display:none}
  #pg-dr-chats .pg-dbody{flex:1;height:auto;min-height:0;padding:0 14px 14px}
  /* main area right of sidebar */
  #pg-view-chat,#pg-view-models{grid-column:2;grid-row:2}
  .pg-msgs{padding:26px 24px 10px}
  .pg-composewrap{padding:10px 24px calc(14px + env(safe-area-inset-bottom))}
  /* settings stays a slide-over */
  .pg-drawer.right{z-index:90}
}
@media(max-width:1099.98px){
  .pg-head{position:sticky;top:0}
}
/* === embedded in the site shell ==============================
   Playground lives INSIDE .main-area next to the native sidebar.
   Height is measured by playground.js (--pg-h), so any site
   header/footer is accounted for automatically.
   ============================================================ */
body.pg-active{overflow-x:hidden}

/* === model picker modal ================================= */
.pg-mpicker{position:fixed;inset:0;z-index:200;background:rgba(15,17,25,.45);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;backdrop-filter:blur(2px)}
.pg-mp-box{width:min(640px,100%);max-height:76vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden;animation:pgmp .14s ease-out}
@keyframes pgmp{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.pg-mp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid #eef0f4}
.pg-mp-head h3{margin:0;font-size:15px}
.pg-mp-box .pg-x{border:0;background:none;font-size:16px;cursor:pointer;color:#888;padding:4px 8px;border-radius:8px}
.pg-mp-box .pg-x:hover{background:#f2f3f7;color:#333}
#pg-mp-q{margin:10px 16px;padding:10px 14px;border:1px solid #e3e5ec;border-radius:10px;font-size:14px;outline:none}
#pg-mp-q:focus{border-color:#6a8dff;box-shadow:0 0 0 3px rgba(106,141,255,.15)}
.pg-mp-list{flex:1;overflow-y:auto;padding:0 8px 8px}
.pg-mp-row{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:9px 10px;border-radius:9px;margin-bottom:2px}
.pg-mp-row:hover{background:#f4f5fa}
.pg-mp-row.active{background:#eef2ff}
.pg-mp-row .pg-mp-name{display:block;font-size:13.5px;font-weight:600;color:#1d2330}
.pg-mp-row .pg-mp-sub{display:block;font-size:11.5px;color:#8a90a2;margin-top:2px}
.pg-mp-foot{padding:8px 16px;border-top:1px solid #eef0f4}
.pg-pill.pick{cursor:pointer;user-select:none}
.pg-pill.pick:hover{background:#eef2ff}