/**
 * css/shell/focus.css
 * Focus mode: the document with every bar taken away, leaving an "Exit focus"
 * pill and one floating control pill.
 *
 * Focus mode is the app's existing `body.app-fullscreen` class (canvas-view.js)
 * — NOT the native Fullscreen API, which on the Android WebView promotes the
 * output panel into the browser top layer and paints the Highlights / Library
 * modals behind it. This file only restyles that existing state for the shell,
 * so Escape, the Android Back button and every other exit route already wired
 * to it keep working.
 *
 * Dependencies: css/shell/tokens.css, css/shell/chrome.css, css/shell/reader.css.
 */

.ts-focus-exit,
.ts-focus-pill { display: none; }

/* ---- entering focus: the shell chrome steps aside --------------------- */
body.ts-shell.app-fullscreen .ts-appbar,
body.ts-shell.app-fullscreen .ts-quickbar,
body.ts-shell.app-fullscreen .ts-tabbar { display: none !important; }

body.ts-shell.app-fullscreen {
  padding-top: 0;
  padding-bottom: 0;
  background: var(--ts-page);
}

/* The base fullscreen rules push the document down to clear the app's own
   fixed zoom bar. That bar is hidden in the shell (reader.css), so the
   reading page starts near the top instead — just clear of the status bar. */
body.ts-shell.app-fullscreen #previewWrapper {
  padding-top: calc(env(safe-area-inset-top, 0px) + 3.5rem) !important;
  min-height: 100vh;
}
body.ts-shell.app-fullscreen,
body.ts-shell.app-fullscreen #outputPanel.visible,
body.ts-shell.app-fullscreen #previewWrapper,
body.ts-shell.app-fullscreen #previewContainer { background: var(--ts-page); }

/* The progress bar drops to the very bottom edge — nothing left to sit on. */
body.ts-shell.app-fullscreen .ts-progress {
  bottom: 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.25rem);
  background: transparent;
}

/* ---- exit pill --------------------------------------------------------- */
body.ts-shell.app-fullscreen .ts-focus-exit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0.625rem);
  right: 0.75rem;
  z-index: 9100;
  padding: 0.625rem 1.125rem;
  border: 0;
  border-radius: 999px;
  background: rgba(58, 58, 64, 0.92);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
}
.ts-focus-exit svg { width: 1.125rem; height: 1.125rem; }

/* ---- floating control pill --------------------------------------------- */
body.ts-shell.app-fullscreen .ts-focus-pill {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.75rem);
  z-index: 9100;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: rgba(28, 28, 32, 0.94);
  box-shadow: var(--ts-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ts-focus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-focus-btn:active { background: rgba(255, 255, 255, 0.14); }
.ts-focus-btn svg { width: 1.25rem; height: 1.25rem; }
.ts-focus-btn.is-active {
  border-color: var(--ts-accent);
  color: var(--ts-accent-text);
}

.ts-focus-zoom {
  min-width: 3.25rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

/* The page-colour control shows the colour it will apply next, so it reads as
   a swatch rather than another grey button. */
.ts-focus-swatch {
  width: 1.5rem; height: 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: #faf3e0;
}