/* Playground page styles — loaded after site.css */

.pg-shell{padding:44px 0 32px}
.pg-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.pg-head h1{font-size:1.6rem}
.pg-timer{
  display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--wash);font-family:var(--font-mono);font-size:.85rem;
}
.pg-timer .pg-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-b);box-shadow:0 0 8px var(--accent-b)}
.pg-timer.is-low{border-color:rgba(255,107,107,.5)}
.pg-timer.is-low .pg-dot{background:var(--danger);box-shadow:0 0 8px var(--danger)}

.pg-frame{
  background:linear-gradient(180deg,var(--bg-elev-2),var(--bg-elev));
  border:1px solid var(--line);border-radius:var(--radius-xl);
  display:flex;flex-direction:column;height:min(640px,72vh);overflow:hidden;position:relative;
}

.pg-messages{flex:1;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:16px}
.pg-msg{max-width:78%;padding:13px 16px;border-radius:16px;font-size:.94rem;line-height:1.55}
.pg-msg.user{align-self:flex-end;background:var(--accent-grad-soft);color:var(--text);border:1px solid rgba(49,97,232,.18);border-bottom-right-radius:5px}
.pg-msg.bot{align-self:flex-start;background:var(--wash-strong);border:1px solid var(--line);border-bottom-left-radius:5px}
.pg-msg.bot.speaking{border-color:var(--accent-b);box-shadow:0 0 0 1px var(--accent-b)}
.pg-msg.system{align-self:center;color:var(--text-faint);font-size:.82rem;background:none;border:none;padding:4px}

.pg-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--wash-strong);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px}
.pg-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:pg-bounce 1.1s infinite ease-in-out}
.pg-typing span:nth-child(2){animation-delay:.15s}
.pg-typing span:nth-child(3){animation-delay:.3s}
@keyframes pg-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.pg-composer{border-top:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:6px;background:var(--wash)}
.pg-textarea{
  flex:1;min-width:0;resize:none;background:var(--wash-strong);border:1px solid var(--line-strong);border-radius:var(--radius-md);
  color:var(--text);padding:10px 12px;font-family:inherit;font-size:.94rem;max-height:120px;line-height:1.5;
}
.pg-textarea:focus{outline:none}
.pg-textarea::placeholder{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){
  .pg-textarea::placeholder{font-size:.78rem}
}
.pg-icon-btn{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;border:1px solid var(--line-strong);
  background:var(--wash);color:var(--text-dim);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s ease;
}
.pg-icon-btn:hover{color:var(--text);border-color:var(--accent-a)}
.pg-icon-btn.is-active{background:var(--accent-grad);color:#ffffff;border-color:transparent}
.pg-icon-btn.is-listening{animation:pg-pulse 1.4s infinite}
@keyframes pg-pulse{0%{box-shadow:0 0 0 0 rgba(35,84,214,.55)}70%{box-shadow:0 0 0 12px rgba(35,84,214,0)}100%{box-shadow:0 0 0 0 rgba(35,84,214,0)}}
.pg-send{background:var(--accent-grad);color:#ffffff;border-color:transparent}
.pg-send:hover{opacity:.92}
.pg-voice-hint{padding:0 18px 14px;font-size:.76rem;color:var(--text-faint)}

.pg-paywall{
  position:absolute;inset:0;background:rgba(5,7,13,.92);backdrop-filter:blur(6px);
  display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;
}
.pg-paywall.is-open{display:flex}
.pg-paywall h2{font-size:1.5rem;margin-bottom:10px;color:#fff}
.pg-paywall p{color:rgba(255,255,255,.75);max-width:40ch;margin-bottom:24px}

.pg-below{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media (max-width:760px){.pg-below{grid-template-columns:1fr}}
.pg-below .card{padding:18px}
.pg-below h4{font-size:.85rem;margin-bottom:6px}
.pg-below p{font-size:.82rem;color:var(--text-dim)}

.pg-explore{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.pg-explore-title{font-size:1.05rem;margin-bottom:16px}
.pg-explore-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pg-explore-card{display:flex;align-items:flex-start;gap:14px;padding:20px;border-radius:14px;border:1px solid var(--line);background:var(--wash);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.pg-explore-card:hover{border-color:var(--accent-a);box-shadow:0 10px 26px -14px rgba(49,97,232,.5);transform:translateY(-2px)}
.pg-explore-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--accent-grad);color:#fff}
.pg-explore-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.pg-explore-name{font-weight:700;font-size:1rem;color:var(--text)}
.pg-explore-desc{font-size:.85rem;color:var(--text-dim);line-height:1.5}
.pg-explore-cta{font-size:.82rem;font-weight:600;color:var(--accent-b);margin-top:2px}
@media (max-width:700px){.pg-explore-grid{grid-template-columns:1fr}.pg-explore-card{padding:16px;gap:12px}.pg-explore-icon{width:38px;height:38px}}
.pg-msg.bot{max-width:88%}
.pg-msg.bot p{margin:0 0 10px}
.pg-msg.bot p:last-child{margin-bottom:0}
.pg-msg.bot ul,.pg-msg.bot ol{margin:0 0 10px 20px;padding:0}
.pg-msg.bot li{margin-bottom:4px}
.pg-msg.bot strong{font-weight:700}
.pg-msg.bot a{color:var(--accent-b);text-decoration:underline}
.pg-msg.bot blockquote{margin:0 0 10px;padding:6px 12px;border-left:3px solid var(--accent-b);color:var(--text-dim);background:var(--wash)}
.pg-msg.bot code{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.85em;background:var(--wash);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.pg-msg.bot pre{position:relative;margin:0 0 10px;padding:14px 16px;background:#1e1e2e;border-radius:10px;overflow-x:auto;font-size:.82rem;line-height:1.5}
.pg-msg.bot pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}
.pg-msg.bot table{border-collapse:collapse;margin:0 0 10px;width:100%;font-size:.85rem}
.pg-msg.bot th,.pg-msg.bot td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.pg-code-copy{position:absolute;top:8px;right:8px;padding:3px 10px;font-size:.72rem;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:6px;cursor:pointer;opacity:.75;transition:opacity .15s}
.pg-code-copy:hover{opacity:1}
.pg-code-copy.is-copied{background:var(--accent-b);border-color:var(--accent-b)}
.pg-msg.bot pre code,.pg-msg.bot pre code *{color:#f5f5f5!important}

.pg-below{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.pg-feat{padding:20px;border-radius:14px;border:1px solid var(--line);background:var(--wash)}
.pg-feat-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--accent-grad-soft);color:var(--accent-a);border:1px solid rgba(49,97,232,.2);margin-bottom:12px}
.pg-feat h4{font-size:.92rem;margin-bottom:6px}
.pg-feat p{font-size:.85rem;color:var(--text-dim);line-height:1.55}
.pg-feat a{color:var(--accent-b);text-decoration:underline}
@media (max-width:760px){.pg-below{grid-template-columns:1fr;gap:12px}.pg-feat{padding:16px}}
.pg-explore-icon-img{background:var(--accent-grad-soft);border:1px solid rgba(49,97,232,.2);padding:8px}
.pg-explore-icon-img img{width:100%;height:100%;object-fit:contain;display:block}

/* Compact / full view toggle */
.pg-status-group{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line-strong);background:var(--wash)}
.pg-status-group .pg-timer{border:none;background:none;padding:6px 10px 6px 12px}
.pg-status-divider{width:1px;height:18px;background:var(--line-strong)}
.pg-view-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:none;background:none;color:var(--text-dim);cursor:pointer;transition:background .15s ease,color .15s ease}
.pg-view-btn:hover{background:var(--wash-strong);color:var(--text)}
.pg-view-btn[aria-pressed="true"]{color:var(--accent-b);background:var(--accent-grad-soft)}
.pg-frame{transition:box-shadow .2s ease}
.pg-frame.is-full{position:fixed;top:calc(64px + 16px);left:16px;right:16px;bottom:16px;height:auto;width:auto;z-index:60;box-shadow:0 20px 60px -12px rgba(0,0,0,.4)}
.pg-frame-backdrop{display:none;position:fixed;inset:0;background:rgba(10,14,25,.55);z-index:55;backdrop-filter:blur(2px)}
.pg-frame-backdrop.is-active{display:block}
body.pg-locked{overflow:hidden}
@media (max-width:600px){
  .pg-frame.is-full{top:calc(70px + 10px);left:10px;right:10px;bottom:10px}
  .pg-status-group{margin-left:auto}
  }
.pg-frame.is-full > #pgStatusGroup{align-self:flex-end;flex-shrink:0;margin:16px 20px 0 20px}

.pg-status-logo{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0}