/* ---- v13: quieter timer, soft colors, page skeleton, pinch + smooth scroll ---- */

/* 1. quieter focus timer */
.pomopill.inbar {
  min-height: 26px !important; padding: 1px 7px 1px 2px !important; gap: 4px !important;
  opacity: .7; background: color-mix(in srgb, var(--fg) 4%, transparent) !important;
  transform: scale(.9); transform-origin: center right;
}
.pomopill.inbar:hover, .pomopill.inbar:focus-within, .pomopill.inbar.paused { opacity: 1; transform: none; }
.pomopill.inbar svg { width: 18px !important; height: 18px !important; opacity: .85; }
.pomopill.inbar b, .pomopill.inbar #pillTime { font-size: 11.5px !important; font-weight: 600; opacity: .9; }
.minitimer {
  min-height: 18px !important; height: 18px !important; padding: 0 7px !important;
  font-size: 10.5px !important; font-weight: 600; opacity: .75;
  background: color-mix(in srgb, var(--acc) 10%, transparent) !important;
}
.minitimer.paused { opacity: .5; }

/* 2. soft yellow / green / blue (hide pink in pickers) */
.sw[data-color="yellow"] { --c: #f6e08a; }
.sw[data-color="green"]  { --c: #a8dfb5; }
.sw[data-color="blue"]   { --c: #a6c9ef; }
.sw[data-color="pink"], #setDefColor [data-v="pink"] { display: none; }
.hlLayer i { opacity: .55; }
[data-theme=dark] .hlLayer i { opacity: .36; }

/* 4. loading skeleton */
.page {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fg) 4%, var(--paper)) 0%,
    color-mix(in srgb, var(--fg) 9%, var(--paper)) 50%,
    color-mix(in srgb, var(--fg) 4%, var(--paper)) 100%);
  background-size: 200% 100%;
}
.page:not(.ready) { animation: pageShimmer 1.15s ease-in-out infinite; }
.page.ready { background: #fff; animation: none; }
[data-theme=dark] .page.ready { background: #16181d; }
@keyframes pageShimmer { 0%{ background-position: 100% 0; } 100%{ background-position: -100% 0; } }
.page canvas { opacity: 0; transition: opacity .2s ease; }
.page.ready canvas { opacity: 1; }

/* 6. pinch preview */
#pdfView.pinching { overflow: hidden !important; will-change: transform; }
#pdfView.pinching .page { pointer-events: none; }

/* scroll smoothness */
#pdfView {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  will-change: scroll-position;
}
#pdfView.zoomed { touch-action: pan-x pan-y; }
#reader.scrolling .hlLayer { pointer-events: none; }
#reader.scrolling .pomopill { transition: none; }

@media (max-width:700px), (hover:none) {
  .selbar .sw { width: 38px; height: 38px; min-height: 38px; }
}