:root{
  --bg:#111; --bar:#000; --muted:#cfcfcf;
  --topH:56px; --dockH:112px;
  --safeBottom: env(safe-area-inset-bottom, 0px);
  --safeTop: env(safe-area-inset-top, 0px);

  /* ✅ viewport height ที่ถูกกับมือถือ + fallback */
  --vh:100vh;
  --kb:0px;
}
@supports (height: 100dvh){
  :root{ --vh:100dvh; }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; font-size:16px; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:#fff; font-family:-apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; overflow:hidden; }
button,input{ font-size:16px; outline:none; border:0; }

/* ✅ Topbar: รวม safeTop ใน "ความสูงจริง" */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height: calc(var(--topH) + var(--safeTop));
  padding-top: var(--safeTop);
  z-index:1200;
  background:var(--bar);

  display:flex;
  align-items:center;
  gap:12px;
  padding-left:14px;
  padding-right:14px;
}
.topbar__btn{background:transparent;color:#fff;font-weight:700;cursor:pointer;}
.topbar__icon{
  margin-left:auto;width:36px;height:36px; font-size: 32px;
  display:flex; align-items:center; justify-content:center;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;
}

/* ✅ Hero: top/height ต้องคิด safeTop ตรงกับ topbar */
.hero{
  position:fixed;
  top: calc(var(--topH) + var(--safeTop));
  left:0; right:0;
  height:calc(var(--vh) - var(--topH) - var(--safeTop) - var(--dockH) - var(--safeBottom) - var(--kb));
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 20px;
}
.hero h1{margin:0 0 8px;font-weight:700;font-size:23px;}
.hero p{margin:0;color:#d9d9d9;opacity:.95;}

/* ✅ Iframe: เหมือน hero เป๊ะ */
.viewer-frame{
  position:fixed;
  top: calc(var(--topH) + var(--safeTop));
  left:0; right:0; width:100%;
  height:calc(var(--vh) - var(--topH) - var(--safeTop) - var(--dockH) - var(--safeBottom) - var(--kb));
  border:0;background:#111;display:none;
}
body.dock-hidden .viewer-frame{
  height:calc(var(--vh) - var(--topH) - var(--safeTop));
}
body.dock-hidden .hero{
  height:calc(var(--vh) - var(--topH) - var(--safeTop));
}

/* Dock */
.dock{
  position:fixed;left:0;right:0;bottom:calc(0px + var(--kb));z-index:1100;
  background:rgba(0,0,0,.92); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:12px 14px calc(14px + var(--safeBottom));
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.dock--hidden{transform:translateY(110%);}
.dock__wrap{max-width:920px;margin:0 auto;}
.dock__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.dock__close{font-weight:700;opacity:.95;cursor:pointer;}
.dock__right{display:flex;align-items:center;gap:12px;color:#fff;}

.glass-btn{
  display:block;width:100%;cursor:pointer;border-radius:6px;padding:16px 18px;font-weight:700;
  background:#fff;color:#111;text-align:center;box-shadow:none;margin-bottom:8px;
}

.dock__links{
  display:flex;align-items:center;justify-content:center;gap:10px;color:#eaeaea;margin:8px 0 10px;
}
.dock__btn{background:#2a2a2a;color:#fff;padding:8px 14px;border-radius:6px;cursor:pointer;}
.dock__label{color:#eaeaea;min-width:92px;text-align:center;}

.urlbar{display:flex;align-items:center;gap:10px;background:#2a2a2a;border-radius:50px;padding:5px 5px;}
.urlbar input{flex:1;border:0;background:transparent;color:#eaeaea;padding:10px 0 10px 14px;}
.urlbar .clear{
  background:transparent;color:#cfcfcf;width:36px;height:36px;font-size:32px;
  align-items:center; display:flex; padding:10px 0 10px 14px; border-radius:50%; cursor:pointer;
}
.urlbar .go{background:#fff;color:#111;font-weight:700;width:40px;height:40px;border-radius:50%;cursor:pointer;}

.switch{position:relative;width:52px;height:30px;display:inline-block;}
.switch input{display:none;}
.track{position:absolute;inset:0;border-radius:999px;background:#333;}
.thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;}
.switch input:checked + .track{background:linear-gradient(90deg,#ff8a2b 0%, #ff2d7a 100%);}
.switch input:checked + .track .thumb{left:25px;}

.openDock{
  position:fixed;bottom:calc(30px + var(--safeBottom) + var(--kb));z-index:1300;height:20px;border-radius:6px;
  display:none;align-items:center;justify-content:center;padding:0 14px;
  background:linear-gradient(90deg,#ff8a2b 0%, #ff2d7a 100%);color:#fff;font-weight:700;
}

.topbar__imgBtn img{
  margin-top:5px;
  width:100px;
  height:100%;
  object-fit:cover;
  border-radius:0px;
  cursor:pointer;
  transition:0.2s;
}
.topbar__imgBtn img:active{
  transform:scale(0.92);
  opacity:0.8;
}

.viewer3__version{
  margin-top:0px;
  text-align:center;
  font-size:14px;
  opacity:0.85;
  color:#fff;
}
.viewer3__version .vNote{
  font-size:12px;
  color:#ffc107;
  margin-left:4px;
}