/* V6.6 — Helpdesk-styled viewer controls with reliable theme contrast. */
.viewer{
  --viewer-control-bg:#ffffff;
  --viewer-control-text:#172033;
  --viewer-control-muted:#64748b;
  --viewer-control-border:#cbd8e8;
  --viewer-control-hover:#eff6ff;
  --viewer-bar-bg:rgba(248,250,252,.96);
  --viewer-bar-text:#172033;
  --viewer-primary:#2563eb;
  --viewer-primary-text:#ffffff;
}
html[data-front-theme='dark'] .viewer{
  --viewer-control-bg:#101d31;
  --viewer-control-text:#ffffff;
  --viewer-control-muted:#b7c5d8;
  --viewer-control-border:#334a67;
  --viewer-control-hover:#172a45;
  --viewer-bar-bg:rgba(7,16,31,.96);
  --viewer-bar-text:#ffffff;
  --viewer-primary:#3b82f6;
  --viewer-primary-text:#ffffff;
}
.viewer .viewer__bar{
  color:var(--viewer-bar-text)!important;
  background:var(--viewer-bar-bg)!important;
  border-bottom:1px solid var(--viewer-control-border)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.12)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
html[data-front-theme='dark'] .viewer .viewer__bar{box-shadow:0 12px 32px rgba(0,0,0,.34)!important;}
.viewer .viewer__badge{
  color:var(--viewer-primary-text)!important;
  background:var(--viewer-primary)!important;
  border-color:var(--viewer-primary)!important;
  border-radius:9px!important;
}
.viewer .viewer__display-controls{
  display:inline-flex!important;
  align-items:stretch!important;
  gap:8px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.viewer .viewer__display-controls button,
.viewer .viewer__display-controls label{
  min-height:40px!important;
  color:var(--viewer-control-text)!important;
  background:var(--viewer-control-bg)!important;
  border:1px solid var(--viewer-control-border)!important;
  border-radius:10px!important;
  box-shadow:0 4px 12px rgba(15,23,42,.08)!important;
  font:800 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
.viewer .viewer__display-controls button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  min-width:108px!important;padding:9px 12px!important;
}
.viewer .viewer__display-controls label{
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  min-width:250px!important;padding:0 10px!important;position:relative!important;
}
.viewer .viewer__display-controls button:hover,
.viewer .viewer__display-controls label:hover{
  color:var(--viewer-primary-text)!important;
  background:var(--viewer-primary)!important;
  border-color:var(--viewer-primary)!important;
  transform:translateY(-1px)!important;
}
.viewer .viewer__display-controls select{
  appearance:none!important;-webkit-appearance:none!important;
  width:100%!important;min-width:198px!important;max-width:none!important;
  padding:0 27px 0 2px!important;border:0!important;outline:0!important;
  color:inherit!important;background:transparent!important;
  font:inherit!important;cursor:pointer!important;color-scheme:light!important;
}
html[data-front-theme='dark'] .viewer .viewer__display-controls select{color-scheme:dark!important;}
.viewer .viewer__display-controls option{
  color:var(--viewer-control-text)!important;
  background:var(--viewer-control-bg)!important;
}
html[data-front-theme='dark'] .viewer .viewer__display-controls option{color:#ffffff!important;background:#101d31!important;}
html[data-front-theme='light'] .viewer .viewer__display-controls option{color:#172033!important;background:#ffffff!important;}
.viewer .viewer__language-control::after{content:'⌄'!important;position:absolute!important;right:11px!important;top:11px!important;color:inherit!important;pointer-events:none!important;font-size:14px!important;}
.viewer .viewer__display-controls :focus-visible{outline:3px solid color-mix(in srgb,var(--viewer-primary) 38%,transparent)!important;outline-offset:2px!important;}
.viewer .viewer__actions>a,
.viewer .viewer__actions>button:not(.viewer__theme-control){
  min-height:40px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  color:var(--viewer-control-text)!important;background:var(--viewer-control-bg)!important;
  border:1px solid var(--viewer-control-border)!important;border-radius:10px!important;padding:9px 12px!important;
  box-shadow:0 4px 12px rgba(15,23,42,.08)!important;
}
.viewer .viewer__actions>a:hover,.viewer .viewer__actions>button:not(.viewer__theme-control):hover{background:var(--viewer-control-hover)!important;}
.viewer #viewerStandalone{color:var(--viewer-primary-text)!important;background:var(--viewer-primary)!important;border-color:var(--viewer-primary)!important;}
.viewer #viewerClose{color:#ffffff!important;background:#dc2626!important;border-color:#dc2626!important;}
.viewer #viewerDownload{color:#ffffff!important;background:#7c3aed!important;border-color:#7c3aed!important;}
.viewer .music-toggle{color:#172033!important;background:#fbbf24!important;border-color:#f59e0b!important;}
@media(max-width:1050px){.viewer .viewer__display-controls{order:-1!important;flex:1 1 100%!important;justify-content:flex-end!important;}}
@media(max-width:690px){
  .viewer .viewer__display-controls{width:100%!important;justify-content:stretch!important;}
  .viewer .viewer__display-controls button{flex:0 0 112px!important;}
  .viewer .viewer__display-controls label{flex:1 1 auto!important;min-width:0!important;}
  .viewer .viewer__display-controls select{width:100%!important;min-width:0!important;}
}
@media(max-width:450px){
  .viewer .viewer__display-controls{flex-wrap:wrap!important;}
  .viewer .viewer__display-controls button,.viewer .viewer__display-controls label{flex:1 1 100%!important;min-width:100%!important;}
}

/* Main website theme/Translate controls use the same Helpdesk container language. */
.front-theme-control,.front-language-control{
  min-height:40px!important;
  color:#172033!important;
  background:#ffffff!important;
  border:1px solid #cbd8e8!important;
  border-radius:10px!important;
  box-shadow:0 4px 12px rgba(15,23,42,.08)!important;
}
.front-language-control select{
  color:inherit!important;
  background:transparent!important;
  color-scheme:light!important;
}
.front-language-control select option{color:#172033!important;background:#ffffff!important;}
html[data-front-theme='dark'] .front-theme-control,
html[data-front-theme='dark'] .front-language-control{
  color:#ffffff!important;
  background:#101d31!important;
  border-color:#334a67!important;
  box-shadow:0 5px 14px rgba(0,0,0,.3)!important;
}
html[data-front-theme='dark'] .front-language-control select{color:#ffffff!important;color-scheme:dark!important;}
html[data-front-theme='dark'] .front-language-control select option{color:#ffffff!important;background:#101d31!important;}
.front-theme-control:hover,.front-language-control:hover{
  color:#ffffff!important;background:#2563eb!important;border-color:#2563eb!important;
}


/* V6.6 mobile viewer: Close is always visible and controls fit narrow devices. */
@media(max-width:760px){
  .viewer{inset:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important}
  .viewer .viewer__bar{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:9px 62px 9px 10px!important;max-height:none!important;overflow:visible!important}
  .viewer .viewer__bar>div:first-child{min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important}
  .viewer #viewerTitle{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12px!important}
  .viewer .viewer__actions{width:100%!important;min-width:0!important;display:flex!important;flex-wrap:wrap!important;gap:7px!important;align-items:stretch!important}
  .viewer .viewer__display-controls{order:0!important;flex:1 1 100%!important;width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:minmax(96px,.42fr) minmax(0,1fr)!important;gap:7px!important}
  .viewer .viewer__display-controls button,.viewer .viewer__display-controls label{width:100%!important;min-width:0!important;max-width:100%!important;min-height:42px!important}
  .viewer .viewer__display-controls button{padding-inline:8px!important}
  .viewer .viewer__display-controls select{width:100%!important;min-width:0!important;max-width:100%!important}
  .viewer #viewerClose{position:absolute!important;top:8px!important;right:8px!important;z-index:80!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;padding:0!important;border-radius:12px!important;font-size:0!important;line-height:1!important}
  .viewer #viewerClose::after{content:'×';font:900 25px/1 system-ui,sans-serif!important}
  .viewer #viewerStandalone,.viewer #viewerDownload,.viewer #viewerMusic{flex:1 1 128px!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:10px!important;padding-inline:8px!important}
  .viewer #viewerFrame{min-width:0!important;width:100%!important;max-width:100%!important;height:100%!important;min-height:0!important}
}
@media(max-width:520px){
  .viewer #viewerStandalone,.viewer #viewerDownload,.viewer #viewerMusic{display:none!important}
  .viewer .viewer__bar{padding-bottom:8px!important}
}
@media(max-width:390px){
  .viewer .viewer__display-controls{grid-template-columns:92px minmax(0,1fr)!important}
  .viewer .viewer__display-controls button,.viewer .viewer__display-controls label{min-height:40px!important;font-size:10px!important}
}


/* ==========================================================================
   V6.6 MOBILE PROJECT VIEWER — one complete horizontally swipeable toolbar.
   ========================================================================== */
@media (max-width:760px){
  .viewer[open],#projectViewer[open]{
    display:grid!important;grid-template-rows:66px minmax(0,1fr)!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .viewer .viewer__bar{
    position:relative!important;inset:auto!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    flex-wrap:nowrap!important;gap:10px!important;
    width:100%!important;max-width:100vw!important;
    min-height:66px!important;height:66px!important;max-height:66px!important;
    padding:7px 10px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;scroll-snap-type:x proximity!important;scroll-padding-inline:10px!important;
    scrollbar-width:thin!important;scrollbar-color:#111 transparent!important;
    background:#ffe100!important;color:#080808!important;border-bottom:4px solid #080808!important;
    box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .viewer .viewer__bar::-webkit-scrollbar{height:5px!important}
  .viewer .viewer__bar::-webkit-scrollbar-track{background:transparent!important}
  .viewer .viewer__bar::-webkit-scrollbar-thumb{background:#111!important;border-radius:99px!important}
  .viewer .viewer__bar>div:first-child{
    flex:0 0 auto!important;min-width:max-content!important;max-width:none!important;
    display:flex!important;align-items:center!important;gap:9px!important;scroll-snap-align:start!important;
  }
  .viewer .viewer__badge{flex:0 0 auto!important;padding:7px 9px!important;border-radius:9px!important;font-size:10px!important}
  .viewer #viewerTitle{
    display:block!important;flex:0 0 auto!important;max-width:none!important;min-width:max-content!important;
    overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;
    color:#080808!important;font:900 12px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  }
  .viewer .viewer__actions{
    flex:0 0 auto!important;width:max-content!important;max-width:none!important;min-width:max-content!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    flex-wrap:nowrap!important;gap:8px!important;scroll-snap-align:start!important;
  }
  .viewer .viewer__display-controls{
    order:0!important;flex:0 0 auto!important;width:auto!important;min-width:max-content!important;
    display:inline-flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:8px!important;
  }
  .viewer .viewer__display-controls button,
  .viewer .viewer__display-controls label,
  .viewer .viewer__actions>a,
  .viewer .viewer__actions>button{
    position:relative!important;inset:auto!important;flex:0 0 auto!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:auto!important;max-width:none!important;min-width:max-content!important;
    height:44px!important;min-height:44px!important;max-height:44px!important;
    margin:0!important;padding:9px 12px!important;border:3px solid #111!important;border-radius:0!important;
    color:#111!important;background:#fff!important;box-shadow:none!important;
    font:900 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
    white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
    scroll-snap-align:start!important;
  }
  .viewer .viewer__display-controls button{min-width:92px!important}
  .viewer .viewer__display-controls label{min-width:150px!important;padding-inline:10px!important}
  .viewer .viewer__display-controls select{
    display:block!important;width:112px!important;min-width:112px!important;max-width:112px!important;
    color:#111!important;background:#fff!important;padding:0 22px 0 4px!important;
  }
  .viewer .viewer__display-controls option{color:#111!important;background:#fff!important}
  .viewer #viewerStandalone{color:#111!important;background:#fff!important;border-color:#111!important}
  .viewer #viewerDownload{color:#111!important;background:#fff!important;border-color:#111!important}
  .viewer #viewerMusic{color:#111!important;background:#ffe100!important;border-color:#111!important}
  .viewer #viewerClose{
    position:relative!important;top:auto!important;right:auto!important;z-index:auto!important;
    width:auto!important;min-width:82px!important;height:44px!important;min-height:44px!important;
    padding:9px 13px!important;color:#fff!important;background:#ff2878!important;border-color:#111!important;
    font-size:10px!important;line-height:1!important;
  }
  .viewer #viewerClose::after{content:none!important}
  .viewer #viewerStandalone,.viewer #viewerDownload,.viewer #viewerMusic{display:inline-flex!important}
  .viewer #viewerFrame{width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important}
  .viewer .viewer__loading{inset:66px 0 0!important}
}

/* V6.6 dimensional safeguard: toolbar remains exactly one row high. */
@media (max-width:760px){
  .viewer,.viewer *{box-sizing:border-box!important}
  .viewer .viewer__bar{box-sizing:border-box!important}
}