@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;600;700&display=swap");

/* ===============================
  Reader (RAV) — Standalone CSS (with mobile fixes)
  - No external CSS deps
  - Config via --reader-* custom properties
=================================*/

/* Host element base */
reading-assistant-viewer {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* ---------- Theme & tokens ---------- */
:root {
  /* Colors */
  --reader-bg:            #0e1c27;
  --reader-surface:       rgba(23, 47, 63, 0.92);
  --reader-surface-2:     rgba(20, 57, 76, 0.9);
  --reader-surface-3:     rgba(33, 92, 120, 0.6);
  --reader-border:        rgba(255, 255, 255, 0.1);
  --reader-border-strong: rgba(255, 255, 255, 0.18);
  --reader-text:          #e8f4fb;
  --reader-text-muted:    #a7c5d6;
  --reader-heading:       #f5fbff;
  --reader-accent:        #6ad3ff;
  --reader-accent-ink:    #0d1c26;
  --reader-focus:         rgba(106, 211, 255, 0.28);
  --reader-amber:         #8ce2ff;
  --reader-shadow:        0 22px 70px rgba(0, 0, 0, 0.45);

  /* Type */
  --reader-font-family: "Space Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --reader-font-size:   15px;
  --reader-line-height: 1.65;

  /* Layout */
  --reader-radius:        16px;
  --reader-radius-sm:     12px;
  --reader-gap:           10px;
  --reader-pad:           14px;
  --reader-toc-width:     300px;
  --reader-sidebar-width: 58px;
  --reader-drawer-max:    560px;
  --reader-drawer-col:    0px;

  /* Motion */
  --reader-dur-fast:    .12s;
  --reader-dur:         .2s;

  /* Viewport-safe heights */
  --vh-100: 100dvh;
  --reader-max-height: var(--vh-100);
}
@supports (height: 100svh) {
  :root { --vh-100: 100svh; }
}
@supports not (height: 100dvh) {
  :root { --vh-100: 100vh; }
}

/* Manual theme switches */
.theme-dark { /* intentional dark palette */ }
.theme-light { /* inherit defaults */ }

/* ---------- Reset inside component ---------- */
.rav-container,
.rav-container * {
  box-sizing: border-box;
  font-family: var(--reader-font-family);
  color: var(--reader-text);
}
.rav-container a { color: var(--reader-accent); text-decoration: none; }
.rav-container a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.rav-container {
  position: relative;
  display: grid;
  grid-template-areas:
    "header header header header"
    "toc tocres content drawer";
  grid-template-columns:
    var(--reader-toc-width)
    6px
    1fr
    var(--reader-drawer-col, 0px);
  grid-template-rows: auto 1fr;
  gap: 0;

  height: var(--reader-max-height);
  max-height: var(--reader-max-height);
  overflow: hidden; /* prevents double-scroll on desktop */
  padding: 6px;

  background:
    radial-gradient(140% 120% at 10% 10%, rgba(56, 141, 168, 0.28), transparent 48%),
    radial-gradient(120% 140% at 90% 30%, rgba(106, 211, 255, 0.22), transparent 52%),
    linear-gradient(180deg, #0f2432 0%, #0b1a25 100%);
  border: 1px solid var(--reader-border-strong);
  
  border-radius: var(--reader-radius);
  backdrop-filter: blur(12px);
  transition: grid-template-columns .22s ease, transform var(--reader-dur), box-shadow var(--reader-dur);
}

.rav-container::before,
.rav-container::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 0 0 calc(var(--reader-radius) - 6px) calc(var(--reader-radius) - 6px);
  pointer-events: none;
  background: linear-gradient(135deg, rgba(124, 242, 199, 0.08), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: 0.4;
}

.rav-container::after {
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 179, 71, 0.07), rgba(124, 242, 199, 0.06));
  filter: blur(22px);
  opacity: 0.45;
}

/*.rav-container:hover { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); }*/
.rav-container > * { position: relative; z-index: 1; }
.rav-toc-pane,
.rav-content-wrap,
.rav-drawer { min-height: 0; }

/* Header */
.rav-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--reader-pad) + 2px);
  background: linear-gradient(120deg, rgba(56, 141, 168, 0.24), rgba(106, 211, 255, 0.2)), var(--reader-surface-2);
  border-radius: calc(var(--reader-radius) - 6px) calc(var(--reader-radius) - 6px) 0 0;
  backdrop-filter: blur(8px);
  justify-content: flex-start;
}
.rav-title { font-weight: 800; letter-spacing: .5px; color: var(--reader-heading); text-transform: uppercase; font-size: 12px; opacity: .8; }

.rav-brand { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; margin-right: 8px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--reader-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.rav-brand-dot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0%, #7cf2c7 60%, #54c8ff 100%); box-shadow: 0 0 0 4px rgba(124,242,199,0.18), 0 0 12px rgba(84,200,255,0.5); }
.rav-brand-text { font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; color: var(--reader-text); opacity: .9; }

.rav-header .rav-input { flex: 1 1 auto !important; min-width: 0; }

/* Inputs & Buttons */

.rav-input, .rav-select, .rav-file-input {
  appearance: none;
  min-width: 220px;
  padding: 12px 14px;
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
  color: var(--reader-text);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--reader-border);
  border-radius: var(--reader-radius-sm);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 36px rgba(0,0,0,0.25);
  transition: border-color var(--reader-dur), box-shadow var(--reader-dur), background var(--reader-dur), transform var(--reader-dur-fast);
}
.rav-input::placeholder { color: color-mix(in srgb, var(--reader-text-muted), transparent 20%); letter-spacing: .15px; }
.rav-input:focus, .rav-select:focus, .rav-file-input:focus {
  border-color: var(--reader-accent);
  box-shadow: 0 0 0 3px var(--reader-focus), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.rav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 12px;
  font-size: 20px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(140deg, #7cf2c7 0%, #54c8ff 50%, #ffb347 100%);
  color: var(--reader-accent-ink);
  border: 1px solid var(--reader-border-strong);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform var(--reader-dur-fast), box-shadow var(--reader-dur-fast), filter var(--reader-dur-fast);
}
.rav-btn svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; pointer-events: none; }
.rav-btn:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 16px 36px rgba(0,0,0,0.32); filter: saturate(1.05); }
.rav-btn:active { transform: translateY(0); box-shadow: 0 10px 24px rgba(0,0,0,0.28) inset; }
.rav-btn.ghost {
  color: var(--reader-text);
  background: rgba(255,255,255,0.05);
  border-color: var(--reader-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.rav-btn.ghost:hover {
  background: var(--reader-surface-3);
  border-color: color-mix(in srgb, var(--reader-accent), var(--reader-border) 55%);
}

/* Contextual ghost buttons */
.rav-toolbar .rav-btn,
.rav-header .rav-btn,
.rav-drawer-header .rav-btn {
  background: rgba(255,255,255,0.06);
  color: var(--reader-text);
  padding: 10px 12px;
}
.rav-toolbar .rav-btn { margin-right: 0; width: 48px; height: 48px; }
.rav-toolbar .rav-zoom .rav-btn { width: 48px; height: 48px; padding: 10px 12px; }
.rav-toolbar .rav-btn:hover,
.rav-header .rav-btn:hover,
.rav-drawer-header .rav-btn:hover { background: color-mix(in srgb, var(--reader-accent), transparent 80%); color: var(--reader-heading); }

/* Toolbar (moved into header) */
.rav-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  
}
.rav-toolbar .rav-zoom { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--reader-border); }

/* ToC */
.rav-toc-pane {
  grid-area: toc;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  border-right: 1px solid var(--reader-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)), var(--reader-surface-2);
  backdrop-filter: blur(6px);
}
.rav-toc-tools { padding: var(--reader-pad); border-bottom: 1px solid var(--reader-border); display: flex; flex-direction: column; gap: 10px; }
.rav-toc-tools .rav-toc-search-row { width: 100%; }
.rav-toc-tools .rav-toc-search-row input[type="search"] { width: 100%; height: 38px; padding: 8px 12px; border: 1px solid var(--reader-border); border-radius: 10px; background: rgba(255,255,255,0.05); color: var(--reader-text); }
.rav-toc-tools .rav-toc-tools-row { display: flex; gap: 8px; width: 100%; }
.rav-toc-tools button { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--reader-border); border-radius: 10px; background: rgba(255,255,255,0.04); color: var(--reader-text); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.rav-toc-tools button:hover { background: var(--reader-surface-3); border-color: var(--reader-accent); color: var(--reader-accent); }

.rav-toc-scroll { overflow: auto; padding: var(--reader-pad); scrollbar-width: thin; }
.rav-toc-item { display: block; padding: 9px 12px; border-radius: 10px; color: var(--reader-text-muted); transition: background var(--reader-dur-fast), color var(--reader-dur-fast), transform var(--reader-dur-fast); }
.rav-toc-item.is-active,
.rav-toc-item:hover { color: var(--reader-text); background: color-mix(in srgb, var(--reader-surface-3), var(--reader-bg) 60%); transform: translateX(2px); }
.rav-toc-item.active { background: color-mix(in srgb, var(--reader-accent), transparent 80%); color: var(--reader-heading); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reader-accent), transparent 30%); }

/* ToC resizer */
.rav-toc-resizer {
  grid-area: tocres;
  justify-self: stretch;
  width: 8px;
  cursor: col-resize;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border-right: 1px solid var(--reader-border);
}
.rav-toc-resizer:hover { background: color-mix(in srgb, var(--reader-accent), transparent 65%); }

/* Content */
.rav-content-wrap {
  grid-area: content;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), var(--reader-surface);
  border-radius: 0 0 calc(var(--reader-radius) - 6px) calc(var(--reader-radius) - 6px);
  
}
.rav-bg { position: absolute; inset: 0; background: radial-gradient(900px 400px at 110% -10%, rgba(56,141,168,.26), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(106,211,255,.22), transparent 65%); pointer-events: none; filter: blur(10px); opacity: .55; }
.rav-content {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: auto;
  padding: 18px 20px 26px;
  line-height: var(--reader-line-height);
  font-size: var(--reader-font-size);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* PDF/Canvas pages */
.rav-content .rav-canvas-page { display: block; margin: 0 auto 16px; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.06); background: #fff; }

/* Markdown / HTML */
.rav-content .rav-md { color: var(--reader-text); }
.rav-content .rav-md h1,
.rav-content .rav-md h2,
.rav-content .rav-md h3 { color: var(--reader-heading); margin: 1.1em 0 .5em; font-weight: 800; line-height: 1.25; }
.rav-content .rav-md p { color: var(--reader-text); margin: .7em 0; }
.rav-content .rav-md code, .rav-content .rav-md pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.95em; background: var(--reader-surface-3); border: 1px solid var(--reader-border); border-radius: 8px; padding: .15em .4em; }
.rav-content .rav-md pre { padding: 10px 12px; overflow: auto; }

/* Drawer (right panel) — desktop inline column */
.rav-drawer { grid-area: drawer; position: relative; border-left: 1px solid var(--reader-border); background: var(--reader-surface-2); }
.rav-drawer-panel { position: sticky; top: 0; max-height: var(--vh-100); display: grid; grid-template-rows: auto 1fr; }
.rav-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: var(--reader-pad); background: var(--reader-surface-2); color: var(--reader-text); border-bottom: 1px solid var(--reader-border); }
.rav-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 12px; border-radius: 999px; color: var(--reader-text-muted); background: color-mix(in srgb, var(--reader-border), transparent 50%); }
.rav-drawer-body { overflow: auto; padding: 12px 14px 16px; -webkit-overflow-scrolling: touch; }

/* Status / Toast */
.rav-status { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 12px 16px; border-radius: 14px; color: var(--reader-accent-ink); background: linear-gradient(135deg, rgba(124,242,199,0.92), rgba(255,179,71,0.9)); box-shadow: 0 12px 34px rgba(0,0,0,0.35); z-index: 99999; opacity: 0; pointer-events: none; transition: opacity var(--reader-dur), transform var(--reader-dur); letter-spacing: .2px; font-weight: 700; }
.rav-status.show,
.rav-status[aria-hidden="false"] { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* Scrollbars (Chromium/WebKit) */
.rav-content::-webkit-scrollbar,
.rav-drawer-body::-webkit-scrollbar,
.rav-toc-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.rav-content::-webkit-scrollbar-track,
.rav-drawer-body::-webkit-scrollbar-track,
.rav-toc-scroll::-webkit-scrollbar-track { background: var(--reader-surface); }
.rav-content::-webkit-scrollbar-thumb,
.rav-drawer-body::-webkit-scrollbar-thumb,
.rav-toc-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--reader-accent), #000 10%); border-radius: 10px; border: 2px solid var(--reader-surface); }

/* Utility */
.rav-hidden { display: none !important; }
.rav-muted  { color: var(--reader-text-muted) !important; }
.rav-divider { height: 1px; background: var(--reader-border); margin: 8px 0; }

/* ---------- Responsiveness ---------- */
@media (max-width: 1200px) {
  .rav-container {
    grid-template-columns:
      var(--reader-toc-width)
      6px
      1fr
      var(--reader-drawer-col, 0px);
  }
}

/* MOBILE: condensed header + content, ToC overlay */
@media (max-width: 900px) {
  .rav-container {
    grid-template-areas:
      "header"
      "content";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    --reader-drawer-col: 0px;
    height: var(--vh-100);
    max-height: var(--vh-100);
    border-radius: 0;
    width: 100vw;
    max-width: 100vw;
    padding: 0;
  }

  reading-assistant-viewer {
    width: 100vw;
    max-width: 100vw;
  }

  .rav-brand { display: none; }
  .rav-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    width: 100vw;
  }

  /* toolbar keeps single row; buttons shrink to fit */
  .rav-toolbar {
    display: flex;
    grid-auto-flow: column;
    grid-auto-columns: minmax(42px, 1fr);
    gap: 6px;
    width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    align-items: center;
    justify-items: stretch;
  }
  .rav-toolbar .rav-btn {
    width: 100%;
    height: 40px;
    padding: 8px 6px;
    margin: 0;
    flex: 1 1 auto;
    font-size: 18px;
  }
  .rav-toolbar .rav-zoom {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
  }
  .rav-toolbar .rav-zoom .rav-btn {
    width: 100%;
    height: 40px;
    padding: 8px 6px;
    flex: 1 1 0;
    font-size: 18px;
  }

  .rav-header .rav-input { width: 100%; flex: 1 1 100%; min-width: 0; }
  
  .rav-content-wrap { 
    grid-area: content;
    border-radius: 0; 
  }

  /* hide inline ToC and resizer; rely on overlay */
  .rav-toc-pane, .rav-toc-resizer { display: none !important; }
  .rav-header { border-radius: 0; }

  /* keep drawer hidden on mobile for cleanliness */
  .rav-drawer { display: none !important; }

  /* let inputs shrink properly */
  .rav-input, .rav-select, .rav-file-input { min-width: 0; }

  /* smoother scroll and no scroll chaining */
  .rav-content-wrap { overflow: hidden; }
  .rav-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rav-btn, .rav-status, .rav-content canvas, .rav-bg, .rav-drawer { transition: none !important; animation: none !important; }
}

/* ---------- TOC toggle (desktop) ---------- */
@media (min-width: 901px) {
  .rav-container.toc-collapsed {
    grid-template-columns: 0px 0px 1fr var(--reader-drawer-col, 0px);
  }
  .rav-container.toc-collapsed .rav-toc-pane,
  .rav-container.toc-collapsed .rav-toc-resizer { display: none !important; inline-size: 0 !important; max-width: 0 !important; border: 0 !important; }
}

/* Smooth width transition */
.rav-container { transition: grid-template-columns .22s ease; }

/* Attribute-driven ToC closed (desktop only) */
@media (min-width: 901px) {
  .rav-container[data-toc="closed"] { grid-template-columns: 0 0 1fr var(--reader-drawer-col, 0px); }
  .rav-container[data-toc="closed"] .rav-toc-pane,
  .rav-container[data-toc="closed"] .rav-toc-resizer { display: none !important; }
}

:root{ --toc-w: var(--reader-toc-width); }
@media (min-width: 901px) {
  .rav-container{ grid-template-columns: var(--toc-w) 6px 1fr var(--reader-drawer-col, 0px); }
}

.hidden{ display:none !important; }


/* ==== Fix 1: zoom tlačidlá vždy horizontálne (desktop only) ==== */
@media (min-width: 901px) {
  .rav-header .rav-toolbar .rav-zoom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .rav-header .rav-toolbar .rav-zoom .rav-btn {
    padding: 8px 10px;
    width: 48px;
    height: 48px;
  }
}

/* Voliteľné: pre istotu nech komponent nepreteká rodiča */
.rav-container { width: 100%; max-width: 100%; }


/* --- ToC: mobile overlay --- */
@media (max-width: 900px) {
  /* zruš pôvodné hide */
  .rav-toc-pane { display: block !important; }
  .rav-toc-resizer { display: none !important; }

  /* panel ako overlay zľava */
  .rav-toc-pane {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: min(86vw, 360px);
    max-width: 90vw;
    transform: translateX(-100%);
    transition: transform var(--reader-dur);
    z-index: 10001; /* nad obsahom, pod toastom */
    box-shadow: 6px 0 24px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    pointer-events: auto;
    touch-action: pan-y;
    height: 100dvh;
    -webkit-overflow-scrolling: touch;
  }

  .rav-toc-scroll {
    flex: 1;
    overflow: visible;
    touch-action: pan-y;
    overscroll-behavior: contain;
    min-height: 0;
  }

  /* polopriesvitný backdrop */
  .rav-toc-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--reader-dur);
    z-index: 10000;
  }

  /* otvorený stav */
  .toc-mobile-open .rav-toc-pane { transform: translateX(0); }
  .toc-mobile-open .rav-toc-mask { opacity: 1; pointer-events: auto; }
}