/* v1.11.3: desktop entry point and optional two-column PC workspace. */
.topbar-actions{display:flex;align-items:center;gap:12px;min-width:0}
.pc-version-button{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #5a9bbd;border-radius:11px;background:#1c4058;
  color:#e5f6ff;min-height:44px;padding:8px 13px;font:750 12px/1.25 system-ui,sans-serif;
  white-space:nowrap;cursor:pointer;touch-action:manipulation;
}
.pc-version-button:active{background:#285a78}
.pc-version-button:focus-visible,.pc-version-close:focus-visible,
.pc-version-panel button:focus-visible,.pc-version-panel a:focus-visible{
  outline:2px solid #9bdcff;outline-offset:3px;
}
.pc-version-panel[hidden]{display:none!important}
.pc-version-panel{
  position:fixed;inset:0;z-index:2147483640;
  display:flex;align-items:center;justify-content:center;overflow-y:auto;
  padding:calc(20px + env(safe-area-inset-top,0px)) 14px calc(20px + env(safe-area-inset-bottom,0px));
  background:rgba(3,11,22,.82);backdrop-filter:blur(7px);
}
.pc-version-dialog{
  box-sizing:border-box;position:relative;width:min(510px,100%);
  padding:23px;max-height:100%;overflow-y:auto;
  border:1px solid #588dab;border-radius:18px;background:#12283b;
  color:#e9f7ff;box-shadow:0 20px 80px #000a;
}
.pc-version-dialog h2{font-size:20px;line-height:1.3;margin:4px 36px 13px 0}
.pc-version-dialog p{font-size:13px;line-height:1.6;color:#c3deef}
.pc-version-dialog .pc-version-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}
.pc-version-dialog .pc-version-row :is(button,a){
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-height:48px;padding:9px;border:1px solid #5e9fbe;border-radius:10px;
  color:#effaff;background:#235475;text-decoration:none;
  text-align:center;font-size:12px;font-weight:750;line-height:1.35;
}
.pc-version-dialog .pc-version-row a{background:#3b9ecb;color:#061c2b}
.pc-version-close{position:absolute;top:13px;right:13px;border:1px solid #507a94;
  color:#effaff;background:#203d52;border-radius:10px;min-width:44px;min-height:44px;
  font-size:23px;cursor:pointer}
.pc-version-url{
  display:block;box-sizing:border-box;width:100%;min-width:0;padding:11px 10px;
  border:1px solid #426b87;border-radius:10px;color:#d8edff;
  background:#0a1a2b;font:500 13px/1.4 system-ui,sans-serif;
}
.pc-version-status{color:#b7e2f4!important;min-height:38px}
.pc-version-note{font-size:11px!important;color:#a9becb!important}
/* Keep the existing phone brand and the Telegram Close/More safe area intact. */
@media(max-width:650px){
  .topbar{gap:5px!important}
  .topbar-actions{gap:0;flex:none}
  .topbar-actions .local-badge{display:none}
  .pc-version-button{font-size:11px;padding:7px 8px;white-space:normal;max-width:126px;min-width:100px}
  .topbar .brand{min-width:0;gap:6px}
  .topbar .brand-icon{width:34px;height:34px;min-width:34px;flex:none}
  .topbar .brand-text{min-width:0}
  .topbar .brand-text strong{font-size:11px;letter-spacing:.03em}
  .topbar .brand-text small{font-size:8px;letter-spacing:.07em}
}
@media(max-width:350px){
  .topbar .brand-icon{display:none}
  .pc-version-button{min-width:96px;max-width:112px}
  .pc-version-dialog{padding:16px}
}
/* The PC mode is activated by ?desktop=1 only when enough width is available.
   The regular Mini App remains unchanged, including its 22-slide carousel. */
@media(min-width:980px){
 body.desktop-workspace:not(.viewer-immersive) .topbar{max-width:1600px}
 body.desktop-workspace:not(.viewer-immersive) .shell{
   display:grid;grid-template-columns:minmax(0,1.45fr) minmax(370px,1fr);
   gap:14px 24px;align-items:start;max-width:1600px;
   padding-top:18px;
 }
 body.desktop-workspace:not(.viewer-immersive) .shell>.io-dock{
   grid-column:1/-1;grid-row:1;position:relative;top:auto;
   margin:0;justify-content:flex-start;
 }
 body.desktop-workspace:not(.viewer-immersive) .shell>.intro{
   grid-column:1/-1;grid-row:2;margin:0;
 }
 body.desktop-workspace:not(.viewer-immersive) .shell>.jump-nav{
   grid-column:1/-1;grid-row:3;min-width:0;
 }
 body.desktop-workspace:not(.viewer-immersive) .shell>.viewport-card{
   grid-column:1;grid-row:4;min-width:0;position:sticky;top:14px;
 }
 body.desktop-workspace:not(.viewer-immersive) .shell>.viewport-card .viewport-body{
   height:clamp(500px,67vh,860px);min-height:500px;
 }
 body.desktop-workspace:not(.viewer-immersive) .shell>.tools-deck-shell{
   grid-column:2;grid-row:4;min-width:0;width:100%;margin:0;
   max-height:min(80vh,900px);overflow-y:auto;overscroll-behavior:contain;
   border-radius:14px;
 }
 body.desktop-workspace:not(.viewer-immersive) .shell>.tools-deck-shell .tools-deck{
   width:100%;max-width:100%;min-width:0;
 }
 body.desktop-workspace:not(.viewer-immersive) .shell>.bottom-section,
 body.desktop-workspace:not(.viewer-immersive) .shell>.privacy-note,
 body.desktop-workspace:not(.viewer-immersive) .shell>.project-small{
   grid-column:1/-1;
 }
}
