/*
This software is free software: you can do whatever you want with it.
Developed by Franck LEFEVRE for K1 (https://k1info.com), aided by a team of friendly and funny robots.
Please use the enormous power of this software to do good things for things and people, always ensuring it harms nothing and nobody.
*/
html, body, #app { height: 100%; margin: 0; }
.hidden { display: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Spinner styles removed (hourglass no longer used) */
.viewer { position: relative; height: 100%; background: var(--viewer-bg, #f6f7f9); }
.viewer img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 0; }
.overlay { position: absolute; top: 0; left: 0; right: 0; padding: 8px; color: #fff; z-index: 3; pointer-events: auto; }
.publisher-badge { color: #0A2A43; background: rgba(255,255,255,0.8); border: 1px solid #0A2A43; border-radius: 999px; padding: 6px 10px; font-weight: 700; backdrop-filter: blur(3px); box-shadow: 0 2px 8px rgba(0,0,0,0.25); max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; pointer-events: auto; position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer; }
.publisher-badge.publisher-filter-active { background: #C62828; color: #fff; border-color: #8E0000; }
.overlay .desc { margin-left: 12px; font-style: italic; opacity: 0.9; }
.icon-btn { background: var(--icon-btn-bg); border: 1px solid var(--outline); padding: 10px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.icon-btn:hover { background: var(--icon-btn-bg-hover); }
.icon-btn { transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease; }
.icon-btn:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,0.30); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn .icon-img { width: 36px; height: 36px; display: block; }
/* Default offsets for the menu icon; injected from server can override */
:root { --menu-icon-offset-x: 4px; --menu-icon-offset-y: 3px; --menu-frame-color:#2F8BE6; }
/* Friendly animation for Robert wherever he appears */
.robert-anim {
  animation: robert-orbit 2800ms linear infinite;
  filter: drop-shadow(0 0 2px rgba(76,190,255,0.35));
  will-change: transform;
  transform-origin: 50% 80%;
}
/* Menu icon: keep animation and bias its resting point bottom-right */
#menuBtn .icon-img {
  position: relative;
  left: var(--menu-icon-offset-x);
  top: var(--menu-icon-offset-y);
  animation: robert-orbit 2800ms linear infinite;
  will-change: transform;
  transform-origin: 50% 80%;
}
@keyframes robert-orbit {
  0%   { transform: translate(0px, 0px)      rotate(0deg)   scale(0.90); }
  20%  { transform: translate(8px, -12px)    rotate(-8deg)  scale(1.15); }
  40%  { transform: translate(0px, -22px)    rotate(-16deg) scale(1.35); }
  60%  { transform: translate(-8px, -12px)   rotate(-12deg) scale(1.50); }
  80%  { transform: translate(0px, -4px)     rotate(-6deg)  scale(1.20); }
  100% { transform: translate(0px, 0px)      rotate(0deg)   scale(0.90); }
}
@media (prefers-reduced-motion: reduce) {
  .robert-anim, #menuBtn .icon-img { animation: none !important; }
}
.viewer-toolbar { position: absolute; top: 8px; left: 8px; display: flex; gap: 8px; z-index: 2; }
.viewer-toolbar-right { position: absolute; top: 8px; right: 8px; display: flex; gap: 8px; z-index: 2; }
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.nav-arrow.left { left: 8px; }
.nav-arrow.right { right: 8px; }
.nav-arrow.hidden { display: none; }
/* Disable interactions and hint visually during transitions */
#viewer.transitioning { pointer-events: none; }
#viewer.transitioning .nav-arrow .icon-btn,
#viewer.transitioning .nav-publisher .icon-btn,
#viewer.transitioning .viewer-toolbar .icon-btn,
#viewer.transitioning .viewer-toolbar-right .icon-btn { opacity: 0.4; filter: grayscale(60%); }

/* Progressive reveal of viewer controls */
.viewer .viewer-toolbar,
.viewer .viewer-toolbar-right,
.viewer .nav-arrow,
.viewer .nav-publisher { transition: opacity 260ms ease; }
.viewer.controls-hidden .viewer-toolbar,
.viewer.controls-hidden .viewer-toolbar-right,
.viewer.controls-hidden .nav-arrow,
.viewer.controls-hidden .nav-publisher { opacity: 0; pointer-events: none; }
.viewer.controls-visible .viewer-toolbar,
.viewer.controls-visible .viewer-toolbar-right,
.viewer.controls-visible .nav-arrow,
.viewer.controls-visible .nav-publisher { opacity: 1; pointer-events: auto; }

/* Soft pulse to hint navigation; paused on hover for stability */
.nav-arrow .icon-btn { animation: pulse-soft 2400ms ease-in-out infinite; }
.nav-arrow .icon-btn:hover { animation-play-state: paused; }

/* Publisher-level navigation buttons: placed below the post arrows */
.nav-publisher { position: absolute; top: calc(50% + 64px); z-index: 2; }
.nav-publisher.left { left: 8px; }
.nav-publisher.right { right: 8px; }
.nav-publisher.hidden { display: none; }

@keyframes pulse-soft {
  0% { transform: scale(1.00); }
  100% { transform: scale(1.06); }
}
.login { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background: var(--login-bg, #111); min-height: 100vh; min-height: 100dvh; padding: 16px 16px 24px; padding-top: 8vh; overflow-y: auto; }
.login-form { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.login-form .link-row a { color: #fff; text-decoration: underline; }
.brand-note { max-width: 420px; text-align: center; color: #ddd; font-size: 0.92em; line-height: 1.35; margin-bottom: 6px; white-space: pre-line; }
.login-form input { padding: 8px 10px; width: 100%; max-width: 240px; border-radius: 8px; border: 1px solid var(--outline); }
.login-form button:not(.show-toggle) { padding: 10px 12px; width: 100%; max-width: 240px; border-radius: 8px; border: 1px solid var(--outline); background: var(--grad-water); color: var(--color-navy); font-weight: 600; }
.input-with-toggle { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 240px; }
.input-with-toggle input { flex: 1 1 auto; min-width: 0; }
.show-toggle { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--outline); background: #fff; color: #0A2A43; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.show-toggle:hover { background: #f7f7f7; }
.input-with-toggle .show-toggle { width: auto !important; min-width: 48px; max-width: none; }
.show-toggle .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.login-brand { display: flex; justify-content: center; align-items: center; margin-top: 8px; }
.login-logo { max-width: 192px; max-height: 192px; width: auto; height: auto; }

/* Improve small-screen ergonomics: keep button visible and reduce logo */
@media (max-height: 700px) {
  .login { padding-top: 32px; }
}
@media (max-height: 560px) {
  .login { padding-top: 20px; }
  .login-form { gap: 6px; }
  /* Hide non-essential help blocks to free space */
  #installHelp, #installDebug { display: none !important; }
}
.hidden { display: none; }
.menu-overlay { position: fixed; inset: 0; backdrop-filter: blur(6px); background: rgba(10,42,67,0.675); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.menu-overlay.hidden { display: none !important; }
.menu-panel { background: rgba(255,179,0,0.75); border-radius: 20px; border: 8px solid var(--menu-frame-color); width: max-content; max-width: 92vw; max-height: 86vh; overflow: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.45); padding: 12px 16px; display: inline-block; }
/* Ensure camera preview fits inside the menu panel */
#camera { width: 100%; max-width: 80vw; max-height: 45vh; object-fit: cover; border-radius: 12px; border: 2px solid var(--menu-frame-color); }
#snapshot { width: 100%; max-width: 80vw; max-height: 45vh; object-fit: contain; border-radius: 12px; }
.menu-title { display: none; }
.menu-user { color: #0A2A43; background: rgba(255,255,255,0.85); border: 1px solid #0A2A43; border-radius: 10px; padding: 6px 10px; margin: 4px 0 10px 0; font-weight: 600; }
.menu-msg { background: transparent; color: var(--menu-frame-color); border: none; border-radius: 0; padding: 4px 0; margin: 4px 0 8px 0; max-width: none; text-align: left; font-weight: 700; }
.menu-msg strong { font-weight: inherit; }
@keyframes shake-anim { 0%{ transform: translateX(0);} 20%{ transform: translateX(-3px);} 40%{ transform: translateX(3px);} 60%{ transform: translateX(-2px);} 80%{ transform: translateX(2px);} 100%{ transform: translateX(0);} }
.menu-msg.shake { animation: shake-anim 0.6s ease-in-out; }
.menu-list { display: flex; flex-direction: column; gap: 0; width: max-content; }
.menu-sep { width: 100%; height: 0; border-top: 1px solid rgba(10,42,67,0.18); margin: 1px 0; }
.menu-item { display: flex; align-items: flex-start; gap: 6px; padding: 1px 4px; background: transparent; border: none; border-radius: 0; color: #0A2A43; font-weight: 700; cursor: pointer; box-shadow: none; text-align: left; font-family: inherit; font-size: 0.92em; line-height: 1.10; max-width: 86vw; }
.menu-item:hover { background: transparent; color: #FF6E3D; }
.menu-item .icon-img { width: 28px; height: 28px; }
.menu-item .label { font-family: inherit; font-size: 0.96em; line-height: 1.25; font-weight: inherit; white-space: normal; overflow-wrap: anywhere; word-break: break-word; display: inline-block; }
.menu-item .icon-img { width: 28px; height: 28px; }
.menu-item .label { font-size: 1.0em; }
.menu-item.hidden { display: none !important; }
.install-hint { max-width: 420px; margin-top: 8px; font-size: 0.9em; color: #555; text-align: center; }
.install-hint .icon { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid currentColor; border-radius: 2px; transform: rotate(45deg); position: relative; top: 1px; }
.install-hint .icon::after { content: ''; position: absolute; top: -6px; left: 2px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid currentColor; }
.install-debug { max-width: 420px; margin-top: 6px; font-size: 0.8em; color: #888; text-align: center; }
.version-badge {
  margin-top: 6px;
  font-size: 0.92em;
  line-height: 1.2;
  color: var(--color-navy); /* Navy text on Aqua gradient = AAA */
  background: var(--grad-water);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  align-self: flex-end;
}

@media (max-width: 420px) {
  .version-badge { font-size: 0.95em; padding: 6px 12px; }
}
.update-banner { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); background: #222; color: #fff; padding: 8px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); z-index: 10000; display: flex; align-items: center; gap: 10px; }
.update-banner button { background: #09f; color: #fff; border: none; border-radius: 16px; padding: 6px 10px; cursor: pointer; }
.modal{ position:fixed; inset:0; background:rgba(10,42,67,0.675); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; z-index: 10001; padding: 16px; }
.modal.hidden{ display:none; }
.modal .modal-content{ background: rgba(255,179,0,0.75); color:#0A2A43; padding:12px 16px; border-radius:20px; border:8px solid #2F8BE6; max-width:min(60vw, 540px); width:max-content; text-align:center; box-shadow: 0 8px 32px rgba(0,0,0,0.45); }
.modal .modal-content img{ max-width:min(50vw, 300px); height:auto; border:8px solid #0A2A43; border-radius:12px; background:#fff; }
.modal .modal-content h3{ margin: 6px 0 8px 0; }
.modal .modal-content p{ margin: 6px 0 0 0; }
.button-row { display:flex; gap: 10px; justify-content: center; margin-top: 10px; }
.share-choices { flex-wrap: wrap; }
.share-choices .icon-btn { min-width: 100px; }
/* Share modal: ensure button label text is black for best readability
   over the yellow/orange modal background. This overrides the container's
   default navy text color. Applies to all share choices and the cancel
   button within the share modal only. */
#shareModal .icon-btn { color: #000; }
.qr-scan-container { position: relative; max-width:min(70vw, 520px); width:100%; margin: 0 auto; border:8px solid #0A2A43; border-radius:12px; overflow:hidden; background:#000; }
.qr-scan-container video { width:100%; height:auto; max-height:60vh; object-fit:cover; display:block; border:0; border-radius:0; background:#000; }
/* Ensure html5-qrcode region has a reasonable height and hides background bleed */
#qrScanRegion { width:100%; min-height:240px; background:#000; border:0; border-radius:0; }
/* Make the scan modal content opaque to avoid seeing the viewer image through it */
#qrScanModal .modal-content{ background: rgba(255,179,0,0.95); }
.qr-frame { position:absolute; inset:8px; pointer-events:none; border: 4px dashed rgba(255,255,255,0.9); border-radius: 12px; box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0.15); }
/* Scrollable list utility for long menus inside modals */
.scroll-list { max-height: min(60vh, 420px); overflow-y: auto; }
/* Ensure the publishers list uses full modal width so the scrollbar aligns to the right edge */
#publisherListModal .modal-content { width: min(60vw, 540px); }
#publisherListModal .menu-list { width: 100%; box-sizing: border-box; }
/* Page turn folding animation */
.page-turn {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  pointer-events: none;
  z-index: 5;
}

/* 3D Flip transition container and faces */
.flip3d {
  position: absolute;
  inset: 0;
  perspective: var(--flip3d-perspective, 1200px);
  pointer-events: none;
  z-index: 10;
  background: transparent;
}
.flip3d .card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--flip3d-duration, 420ms) var(--flip3d-easing, ease-in-out);
}
.flip3d .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.flip3d .front, .flip3d .back { display: block; width: 100%; height: 100%; object-fit: contain; }
.flip3d .front { transform: rotateY(0deg); }
.flip3d .back { transform: rotateY(180deg); }
/* Simple shading to reduce bright flashes during rotation */
.flip3d .face::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
}
/* The rotation is applied on .card; container provides perspective */
.page-turn .sheet {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform-origin: left center;
  background: transparent;
}
.page-turn .sheet img { width: 100%; height: 100%; object-fit: contain; display:block; }
.page-turn.right .sheet { transform-origin: right center; }
.page-turn .shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(255,255,255,0.10) 40%, rgba(0,0,0,0.0));
  mix-blend-mode: multiply; pointer-events:none;
}
.page-turn.right .shade { background: linear-gradient(270deg, rgba(0,0,0,0.25), rgba(0,0,0,0.0)); }

/* Slice-based curl approximation */
.page-turn .stack { position:absolute; inset:0; }
.page-turn .slice { position:absolute; top:0; bottom:0; overflow:hidden; will-change: transform; }
.page-turn .slice img { position:absolute; top:0; height:100%; object-fit:contain; }
.page-turn .slice .slice-shade { position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; }
/* Open-document button: keep button 64x64, enlarge inner pictogram */
/* Hit-area expansion for Menu and Open buttons so the whole displayed surface is clickable. */
/* Sizes are configurable via CSS variables injected by the backend. */
/* Menu button: use a larger square so the animated icon remains within the hit box. */
#menuBtn.icon-btn {
  width: var(--menu-btn-size, 84px);
  height: var(--menu-btn-size, 84px);
  padding: 0;
}
/* Open-document button: match the visible size directly; remove overflow beyond the button. */
#openBtn.icon-btn {
  padding: 0;
  width: var(--open-btn-size, 104px);
  height: var(--open-btn-size, 104px);
  overflow: hidden;
}
#openBtn .icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Enlarge the inner pictogram without changing button size */
  transform: scale(var(--open-btn-icon-scale, 2));
  transform-origin: center center;
}