/* Shared chrome for every PDF surface: the in-app editor, the live-session
 * page and the read-only snapshot viewer.
 *
 * One stylesheet so the three cannot drift apart. What differs between them is
 * which controls exist, never how they look or where they sit:
 *
 *   top centre   .pdfui-toolbar   one wide bar of annotation tools, split into
 *                                 sections (tools | colours | history)
 *   top left     .pdfui-actions-left  document actions marked side:'left'
 *   top right    .pdfui-actions   document actions: close, and callers' own
 *   bottom       .pdfui-bottom    zoom slider + page counter
 *
 * Everything is rectangular with soft corners — no circular buttons.
 */

.pdfui-chrome {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* only the controls themselves take input */
    z-index: 4;
}

.pdfui-chrome > * { pointer-events: auto; }

/* --- the tool bar -------------------------------------------------------- */

.pdfui-toolbar {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    max-width: calc(100vw - 24px);
    background: rgba(17, 24, 39, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* A narrow phone cannot fit ten tools plus colours; scroll rather than
       wrap, so the bar stays one predictable strip at every width. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.pdfui-toolbar::-webkit-scrollbar { display: none; }
.pdfui-toolbar.hidden { display: none; }

.pdfui-group { display: flex; align-items: center; gap: 2px; }

.pdfui-divider {
    width: 1px;
    align-self: stretch;
    margin: 2px 5px;
    background: rgba(255, 255, 255, 0.12);
    flex: none;
}

/* --- buttons ------------------------------------------------------------- */

.pdfui-btn {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.13s ease, color 0.13s ease;
}
.pdfui-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pdfui-btn:active:not(:disabled) { transform: translateY(0.5px); }
.pdfui-btn:disabled { opacity: 0.34; cursor: default; }
.pdfui-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }
.pdfui-btn.is-active { background: #2563eb; color: #fff; }
.pdfui-btn.is-danger:hover:not(:disabled) { background: #dc2626; color: #fff; }

/* Hotkey badge, tucked into the corner of each tool. Small enough to ignore
   until you go looking for it. */
.pdfui-key {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.42);
    pointer-events: none;
}
.pdfui-btn.is-active .pdfui-key { color: rgba(255, 255, 255, 0.75); }

/* Inline SVG icons sit on the same baseline as the icon-font ones. */
.pdfui-svg { display: inline-flex; align-items: center; justify-content: center; }

/* Colour swatches: the same rectangle as every other button, filled. */
.pdfui-swatch {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--swatch, #e0342c);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.pdfui-btn.is-active .pdfui-swatch {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 2px #fff;
}

/* --- document actions, top right ---------------------------------------- */

.pdfui-actions {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(17, 24, 39, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* The left-hand bar: same strip, other corner. Anything the caller marks
   `side: 'left'` (today: download) lands here, so neither corner has to carry
   every document action. */
.pdfui-actions-left { right: auto; left: 16px; }
.pdfui-actions.hidden { display: none; }
.pdfui-btn.hidden { display: none; }
/* An action bar whose every button is hidden should not linger as an empty
   floating rectangle — e.g. the live page's download, which only appears once
   the session has been stopped. */
.pdfui-actions:not(:has(.pdfui-btn:not(.hidden))) { display: none; }

/* --- status + page counter ---------------------------------------------- */

/* Bottom-right: the top-right corner belongs to the action bar and whatever
   hangs beneath it, such as the share sheet. */
.pdfui-status {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.9);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pdfui-status.hidden { display: none; }
.pdfui-status.is-error { color: #fca5a5; }
.pdfui-status.is-ok { color: #86efac; }

/* Bottom centre: zoom slider and page counter on one row, so the pair moves
   as a unit and nothing has to dodge anything else. */
.pdfui-bottom {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
}

.pdfui-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(17, 24, 39, 0.85);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pdfui-zoom i { font-size: 0.7rem; opacity: 0.6; }
.pdfui-zoom-value {
    min-width: 34px;          /* "50%" and "100%" must not shift the slider */
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* The range input is styled from scratch in both engines — the native control
   is a different animal on each, and this bar has one look. */
.pdfui-zoom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 104px;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
}
.pdfui-zoom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px; height: 13px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.pdfui-zoom-range::-moz-range-thumb {
    width: 13px; height: 13px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.pdfui-zoom-range:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.pdfui-zoom.hidden { display: none; }

.pdfui-pill {
    padding: 5px 13px;
    background: rgba(17, 24, 39, 0.85);
    color: #fff;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}
.pdfui-pill.hidden { display: none; }

/* Idle fade. Hovering or focusing anything brings the chrome straight back. */
.pdfui-chrome.is-idle .pdfui-toolbar,
.pdfui-chrome.is-idle .pdfui-actions,
.pdfui-chrome.is-idle .pdfui-bottom { opacity: 0.4; transition: opacity 0.3s ease; }
.pdfui-chrome .pdfui-toolbar:hover,
.pdfui-chrome .pdfui-toolbar:focus-within,
.pdfui-chrome .pdfui-actions:hover,
.pdfui-chrome .pdfui-actions:focus-within,
.pdfui-chrome .pdfui-bottom:hover,
.pdfui-chrome .pdfui-bottom:focus-within { opacity: 1 !important; }

/* --- annotation surface -------------------------------------------------- */

/* The overlay only takes pointer input while a tool that draws is selected;
   under the plain cursor tool the page scrolls and selects as normal. */
.pdfui-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    touch-action: auto;
}
.pdfui-armed .pdfui-overlay { pointer-events: auto; touch-action: none; }
.pdfui-armed .pdfui-scroll { touch-action: pan-y; }

.pdfui-armed.is-tool-select .pdfui-overlay { cursor: default; }
.pdfui-armed.is-tool-text .pdfui-overlay { cursor: text; }
.pdfui-armed.is-tool-line .pdfui-overlay,
.pdfui-armed.is-tool-arrow .pdfui-overlay,
.pdfui-armed.is-tool-rect .pdfui-overlay,
.pdfui-armed.is-tool-ellipse .pdfui-overlay { cursor: crosshair; }
.pdfui-armed.is-tool-pen .pdfui-overlay {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='2.5' fill='%23111'/></svg>") 5 5, crosshair;
}
.pdfui-armed.is-tool-highlight .pdfui-overlay {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><rect x='4' y='8' width='14' height='6' rx='2' fill='rgba(242,194,48,0.55)' stroke='white' stroke-width='1'/></svg>") 11 11, crosshair;
}
.pdfui-armed.is-tool-eraser .pdfui-overlay {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='10' r='8' fill='none' stroke='white' stroke-width='1.6'/><circle cx='10' cy='10' r='8' fill='none' stroke='rgba(0,0,0,0.4)' stroke-width='0.6'/></svg>") 10 10, cell;
}

/* Text annotation editor: deliberately invisible, so what you see while typing
   is what the page will hold. */
.pdfui-text-input {
    position: absolute;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    caret-color: currentColor;
    font-weight: 600;
    resize: none;
    overflow: hidden;
    outline: none;
    white-space: pre;
    min-width: 2ch;
}

/* --- other people -------------------------------------------------------- */

.pdfui-peer-cursor {
    position: absolute;
    z-index: 3;
    transform: translate(-2px, -2px);
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.72rem;
    transition: left 0.08s linear, top 0.08s linear;
}
.pdfui-peer-cursor i {
    font-size: 0.8rem;
    transform: rotate(-90deg);
    color: var(--peer-color, #7c3aed);
}
/* The chip's fill comes from --peer-color, never from currentColor: a span
   that sets its own `color` resolves currentColor to that colour, which
   previously painted a white chip with white text on it and hid the name. */
.pdfui-peer-cursor span {
    background: var(--peer-color, #7c3aed);
    color: #fff;
    padding: 1px 7px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

/* A narrow window gets one strip and two corners, with nothing stacked between
   them: the tool bar takes the bottom edge — where the thumb is on a phone —
   and the document actions keep the same top corners they hold on a desktop.
   The cut-off is 900px rather than phone-width because that is where a centred
   tool bar stops clearing those corners: at 768px (an iPad held upright) it ran
   straight under both of them. */
@media (max-width: 900px) {
    .pdfui-toolbar {
        top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
    }
    /* Zoom is a pointer control; pinch is the gesture on a phone. */
    .pdfui-zoom { display: none; }
    /* Where there are tools they own the bottom edge, and the page counter
       stands down — the document is what deserves the screen. A viewer with no
       tools (the snapshot page) keeps its counter, raised clear of its own
       bottom-left attribution. */
    .pdfui-chrome.has-tools .pdfui-bottom { display: none; }
    .pdfui-chrome:not(.has-tools) .pdfui-bottom { bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); }
    /* Above the tool bar rather than under the action bars. */
    .pdfui-status { bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); top: auto; right: 16px; }
}