/* ============================================
   new-page-desktop-panel.css — the desktop page editor's one right-hand
   panel + icon rail (desktop-panel.js, install 20). Desktop-only: only
   loadNewPageDesktop() builds this markup, and every rule is inside the
   same min-width breakpoint the rest of the desktop editor uses. All class
   names are new (np-side-*, np-sv-*, np-lay*, np-post-*), so nothing here
   can reach the phone editor.
   ============================================ */
@media (min-width: 769px) {

  /* ---- Panel: slides by animating its width; the inner box keeps a fixed
     width so its contents never squash mid-slide ---- */
  .np-side-panel {
    width: 340px;
    flex-shrink: 0;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    transition: width .3s cubic-bezier(.32,.72,0,1);
  }
  .np-side-panel.np-side-closed {
    width: 0;
    border-left-width: 0;
  }
  .np-side-inner {
    width: 340px;
    height: 100%;
  }
  .np-side-view {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  .np-side-view.np-side-active {
    display: flex;
  }

  /* ---- Header: title on the left, × or ← as a round button ---- */
  .np-side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 14px 12px 18px;
    min-height: 62px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
  }
  .np-side-title {
    flex: 1;
    min-width: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #18181b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .np-side-iconbtn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f3f7;
    color: #18181b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }
  .np-side-iconbtn:hover { background: #ebe6f9; }
  /* The sticker tray's header wrapper keeps its old class (index.js puts the
     My Drawer / My Shop tabs right after it); zero its old padding. */
  .np-side-panel .np-sticker-header {
    padding: 0;
    flex-shrink: 0;
  }

  .np-side-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: none;
    font-family: 'Poppins', sans-serif;
  }
  .np-side-body::-webkit-scrollbar { display: none; }

  /* ---- Rail ---- */
  .np-side-rail {
    width: 78px;
    box-sizing: border-box; /* padding inside the full height, so Next never pokes off the bottom */
    padding-bottom: 14px;
    flex-shrink: 0;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 16px;
  }
  .np-side-rail-btn {
    width: 70px;
    padding: 8px 0 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #52525b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-family: 'Poppins', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
  }
  .np-side-rail-btn:hover { background: #f5f3ff; }
  .np-side-rail-btn.np-side-rail-on {
    background: #efe9fd;
    color: #6D28D9;
  }
  /* Bottom of the rail: Tips, then Next (install 23). */
  .np-side-rail-spacer { flex: 1; }
  .np-side-rail-next {
    width: 62px;
    height: 58px;
    border: none;
    border-radius: 14px;
    background: #6D28D9;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(109,40,217,.3);
  }
  .np-side-rail-next:hover { background: #5b21b6; }
  .np-side-rail-next.np-side-rail-next-on { background: #5b21b6; box-shadow: 0 0 0 3px #efe9fd; }
  .np-side-rail-next:focus-visible { outline: 2px solid #6D28D9; outline-offset: 2px; }
  /* Install 24: gray until the page has a sticker and a background. Still
     clickable, so a click can say what's missing (.np-next-why). */
  .np-side-rail-next.np-side-rail-next-off,
  .np-side-rail-next.np-side-rail-next-off:hover {
    background: #cfc8e6;
    box-shadow: none;
    cursor: not-allowed;
  }
  .np-next-why {
    position: fixed;
    transform: translateY(-50%);
    max-width: 220px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #1f1f2e;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    line-height: 1.35;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 2000;
  }
  .np-next-why.np-next-why-show { opacity: 1; }
  .np-side-rail-btn:focus-visible,
  .np-side-iconbtn:focus-visible {
    outline: 2px solid #6D28D9;
    outline-offset: 2px;
  }

  /* ---- Selected-sticker view ---- */
  .np-sv-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: #f7f5fd;
  }
  .np-sv-who img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .np-sv-name {
    font-weight: 700;
    font-size: 15px;
    color: #18181b;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .np-sv-sec {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b8b98;
  }
  .np-sv-hint {
    font-size: 12px;
    color: #71717a;
    margin-top: -4px;
  }
  .np-sv-seg {
    display: flex;
    gap: 2px;
    background: #f1f1f5;
    border-radius: 999px;
    padding: 3px;
  }
  .np-sv-seg button {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 7px 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #52525b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
  }
  .np-sv-seg button.np-sv-on {
    background: #ffffff;
    color: #18181b;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
  }
  .np-sv-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .np-sv-row label {
    width: 62px;
    flex-shrink: 0;
    font-size: 13px;
    color: #52525b;
  }
  .np-sv-row input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: #6D28D9;
  }
  /* Install 26: Rotation slider with tick marks at −180 / −90 / 0 / 90 /
     180. The ticks are inset by half the slider knob so they line up with
     where the knob's center lands. */
  .np-sv-slider {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
  }
  .np-sv-slider input[type="range"] {
    width: 100%;
    margin: 0;
  }
  .np-sv-ticks {
    position: absolute;
    left: 8px;
    right: 8px;
    top: calc(100% + 1px);
    height: 7px;
    pointer-events: none;
  }
  .np-sv-ticks span {
    position: absolute;
    top: 0;
    width: 2px;
    height: 5px;
    margin-left: -1px;
    border-radius: 1px;
    background: #d4d4d8;
    transition: background .15s, height .15s;
  }
  .np-sv-ticks span.np-sv-tick-on {
    background: #6D28D9;
    height: 7px;
  }
  .np-sv-ticks span.np-sv-tick-pop {
    animation: np-sv-tick-pop .28s ease-out;
  }
  @keyframes np-sv-tick-pop {
    0% { transform: scaleX(1); }
    40% { transform: scaleX(2.5); }
    100% { transform: scaleX(1); }
  }
  .np-sv-num {
    width: 62px;
    border: 1px solid #e4e4ec;
    border-radius: 7px;
    padding: 4px 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #18181b;
    background: #ffffff;
  }
  .np-sv-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .np-sv-btn {
    border: 1px solid #e4e4ec;
    background: #ffffff;
    color: #18181b;
    border-radius: 9px;
    padding: 8px 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    cursor: pointer;
  }
  .np-sv-btn:hover { border-color: #6D28D9; }
  .np-sv-rm {
    color: #dc2626;
    border-color: #f3d0d0;
  }
  .np-sv-rm:hover { border-color: #dc2626; }
  /* Rotation reset (install 23) and the matching blank on the Size row so
     both number fields line up. */
  .np-sv-reset {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid #e4e4ec;
    border-radius: 8px;
    background: #ffffff;
    color: #3f3f46;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }
  .np-sv-reset:hover { border-color: #6D28D9; color: #6D28D9; }
  .np-sv-gap { width: 32px; flex-shrink: 0; }

  /* ---- Layers ---- */
  /* Install 24: the layers list sits inside the sticker view. */
  .np-sv-layers { margin: 4px 0 14px; }
  .np-lay {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .np-lay li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: #ffffff;
    cursor: pointer;
  }
  .np-lay li:hover { background: #f7f5fd; }
  .np-lay li.np-lay-on {
    border-color: #6D28D9;
    background: #f3eefe;
  }
  .np-lay li.np-lay-over { border-top: 2px solid #6D28D9; }
  .np-lay img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    pointer-events: none;
    flex-shrink: 0;
  }
  .np-lay-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #18181b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .np-lay-grip {
    color: #a1a1aa;
    cursor: grab;
    letter-spacing: -2px;
  }

  /* ---- Post step ---- */
  .np-post-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: #888;
  }
  .np-post-faint { color: #bbb; }
  .np-post-caption {
    width: 100%;
    height: 120px;
    border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    resize: none;
    box-sizing: border-box;
    outline: none;
  }
  .np-post-caption:focus,
  .np-post-tags:focus-within {
    border-color: #6D28D9;
    box-shadow: 0 0 0 2px rgba(109,40,217,0.15);
  }
  .np-post-tags {
    width: 100%;
    min-height: 37px;
    border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 6px 8px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    cursor: text;
  }
  .np-post-tags input {
    flex: 1;
    min-width: 80px;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
  }
  .np-post-counter {
    font-size: 11px;
    color: #ccc;
    text-align: right;
    margin-top: 2px;
  }
  .np-post-btn {
    height: 44px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to top right, #6D28D9, #14B8A6);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    cursor: pointer;
  }
  .np-post-btn:hover { opacity: .9; }

  /* ---- Tray search + Recently used (install 22) ---- */
  .np-tray-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 6px;
    padding: 0 10px;
    height: 36px;
    border: 1px solid #e4e4ec;
    border-radius: 10px;
    color: #8b8b98;
    flex-shrink: 0;
    cursor: text;
  }
  .np-tray-search:focus-within {
    border-color: #6D28D9;
    box-shadow: 0 0 0 2px rgba(109,40,217,0.15);
  }
  .np-tray-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #18181b;
  }
  .np-recent-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b8b98;
    margin: 6px 0 6px;
  }
  .np-recent-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f0eff5;
  }

  /* Layers drop marks: line above or below the row (install 22). */
  .np-lay li.np-lay-under { border-bottom: 2px solid #6D28D9; }

  /* Undo / redo at the front of the zoom pill (install 22). */
  .np-zoom-div {
    width: 1px;
    height: 20px;
    background: #ececf2;
    margin: 0 2px;
  }

  /* ---- Zoom (desktop-zoom.js, install 21) ---- */
  .np-canvas-area {
    position: relative;
  }
  /* The undo / zoom bar sits in a slot under the page (install 23),
     above a zoomed-in canvas. */
  .np-zoom-slot {
    position: relative;
    z-index: 20;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .np-zoom-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 1px 6px rgba(0,0,0,.14);
    font-family: 'Poppins', sans-serif;
  }
  .np-zoom-pill button {
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #3f3f46;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .np-zoom-pill button:hover { background: #f3f0fb; }
  .np-zoom-pill button:disabled { opacity: .35; cursor: default; background: transparent; }
  .np-zoom-pill button:focus-visible { outline: 2px solid #6D28D9; outline-offset: 1px; }
  .np-zoom-label {
    min-width: 48px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #18181b;
    font-variant-numeric: tabular-nums;
  }
  .np-zoom-fit {
    border-left: 1px solid #ececf2 !important;
    border-radius: 0 999px 999px 0 !important;
  }
  .np-canvas-area.np-zoom-grab,
  .np-canvas-area.np-zoom-grab * {
    cursor: grab !important;
  }
  .np-canvas-area.np-zoom-panning,
  .np-canvas-area.np-zoom-panning * {
    cursor: grabbing !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .np-side-panel { transition: none; }
  }
}