/* ============================================================
   SEMS — กล้องเต็มจอ (Text Stamp)
   ============================================================ */

html.cam-page, html.cam-page body{
  height:100%; overflow:hidden;
  overscroll-behavior:none;
}
html.cam-page body{
  background:#000;
  padding:0; margin:0;
}

.cam-full{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:#000;
}

/* ---------- พื้นที่ภาพ ---------- */
.cam-box{
  position:relative; flex:1; min-height:0;
  overflow:hidden; background:#000;
  touch-action:none;
}
.cam-box video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform-origin:center center;
}
.cam-box canvas.ov{
  position:absolute; pointer-events:none;
}
.shot-view{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
.shot-view canvas{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
}

/* ---------- แถบบน ---------- */
/* ---------- แถบบน : กระจกฝ้าลอยเหนือภาพ ---------- */
.cam-top{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 14px 30px;
  background:linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, transparent 100%);
  pointer-events:none;
}
.cam-top > *{ pointer-events:auto; }
.cam-top .title{
  font-size:14px; font-weight:700; letter-spacing:.2px; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.cam-top .spacer{ flex:1; }

.rbtn{
  width:40px; height:40px; border-radius:50%;
  background:rgba(24,26,30,.52); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:16px; line-height:1; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:transform .13s, background .16s, border-color .16s;
}
.rbtn:hover{ background:rgba(40,44,50,.66); border-color:rgba(255,255,255,.26); }
.rbtn:active{ transform:scale(.9); }
.rbtn:disabled{ opacity:.35; }
.rbtn.wide{ width:auto; border-radius:99px; padding:0 16px; font-size:13px; font-weight:600; gap:7px; }

/* ---------- แถบซูมแนวตั้ง ---------- */
.zoom-wrap{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:11px;
}
.zoom-val{
  font-family:var(--mono, ui-monospace, monospace); font-size:11.5px; font-weight:600;
  color:#fff; background:rgba(24,26,30,.55); border:1px solid rgba(255,255,255,.13);
  border-radius:99px; padding:5px 11px; letter-spacing:.3px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.zoom-wrap input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:150px; height:5px; border-radius:99px; margin:0;
  transform:rotate(90deg); transform-origin:center;
  background:linear-gradient(90deg, var(--amber, #f5a623) var(--fill, 0%), rgba(255,255,255,.22) var(--fill, 0%));
  outline:none;
}
.zoom-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:#fff; border:none; box-shadow:0 2px 8px rgba(0,0,0,.45); cursor:pointer;
}
.zoom-wrap input[type="range"]::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%; background:#fff; border:none; cursor:pointer;
}

/* ---------- แถบล่าง ---------- */
.cam-bottom{
  flex:none; position:relative; z-index:6;
  display:flex; align-items:center; gap:12px;
  padding:16px 18px calc(18px + env(safe-area-inset-bottom));
  background:#0b0d0f;
  border-top:1px solid rgba(255,255,255,.06);
}
.cam-bottom .side{ flex:1; display:flex; gap:9px; min-width:0; }
.cam-bottom .side.right{ justify-content:flex-end; }

.big-shutter{
  flex:none; width:72px; height:72px; border-radius:50%;
  background:#fff; border:none; cursor:pointer; padding:0;
  box-shadow:0 0 0 4px rgba(255,255,255,.16), 0 6px 20px rgba(0,0,0,.5);
  transition:transform .12s, box-shadow .16s;
}
.big-shutter:hover{ box-shadow:0 0 0 5px rgba(255,255,255,.24), 0 6px 22px rgba(0,0,0,.55); }
.big-shutter:active{ transform:scale(.9); }
.big-shutter:disabled{ opacity:.3; cursor:not-allowed; box-shadow:0 0 0 4px rgba(255,255,255,.1); }

.gbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  color:#e9edf1; border-radius:12px; padding:11px 15px;
  font-family:var(--sans, -apple-system, 'Segoe UI', sans-serif);
  font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform .12s, background .16s, border-color .16s;
}
.gbtn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.gbtn:active{ transform:scale(.96); }
.gbtn:disabled{ opacity:.4; cursor:not-allowed; }
.gbtn.primary{
  background:var(--amber, #f5a623); border-color:var(--amber, #f5a623);
  color:#141719; font-weight:700;
}
.gbtn.primary:hover{ filter:brightness(1.07); }

.cam-error{
  position:absolute; inset:0; z-index:4;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:32px 26px; text-align:center; color:#fff;
  background:#101315;
}
.cam-error svg{ width:56px; height:56px; opacity:.45; }
.cam-error .msg{ font-size:13.5px; line-height:1.7; max-width:380px; }

/* ---------- แผงตั้งค่าด้านขวา ---------- */
.panel-back{
  position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.panel-back.on{ opacity:1; pointer-events:auto; }

.side-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:21;
  width:min(390px, 92vw);
  background:var(--bg-panel, #1c2024);
  border-left:1px solid var(--line, #2b3136);
  transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column;
  box-shadow:-14px 0 40px rgba(0,0,0,.45);
}
.side-panel.on{ transform:none; }

.side-panel .sp-head{
  display:flex; align-items:center; gap:12px;
  padding:calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
  border-bottom:1px solid var(--line, #2b3136); flex:none;
}
.side-panel .sp-head h2{ margin:0; font-size:15px; font-weight:800; flex:1; }
.side-panel .sp-body{
  flex:1; overflow-y:auto; padding:16px;
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 24px);
  -webkit-overflow-scrolling:touch;
}

.sp-sec{ margin-bottom:22px; }
.sp-sec > h3{
  margin:0 0 12px; font-size:11.5px; font-weight:700;
  color:var(--amber, #f5a623); text-transform:uppercase; letter-spacing:.6px;
}

/* ---------- จอเล็กมาก ---------- */
@media (max-height:640px){
  .big-shutter{ width:58px; height:58px; border-width:4px; }
  .cam-bottom{ padding:10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .zoom-wrap input[type="range"]{ height:min(38vh, 180px); }
}
@media (max-width:380px){
  .gbtn{ padding:9px 11px; font-size:12px; }
  .cam-bottom{ gap:8px; padding-left:12px; padding-right:12px; }
}