/* ============================================
   tablet.css — tablet widths and narrow computer windows (B11, Oct 2026)
   - 769–1180px: the side panel is a 72px icon rail. Tapping the square
     logo opens it over the page with labels (nav.js). Same look as
     Creator Studio's rail.
   - Under 1400px: the "From the Sticker Shop" rail is the first thing to
     go (Home, Inbox, Get Coins). A hidden rail never loads its stickers.
   - Home, 769–1023px: touch screens get the phone-style post (comments
     open in the sheet from the comment button on the card); a mouse keeps
     the comments column and the post shrinks to make room for it.
   - Notifications, 769–1023px: one column. Tapping a row slides its
     detail in over the list, with a way back (notifications/index.js).
   - Inbox, 769–1180px: New Message shows as just the +, so the search
     field gets the room. 769–1023px: the list is full width and an open
     chat is a sheet from the bottom (inbox/index.js).
   - Sticker Shop, 769–1180px: stickers 6 across (computers keep 8).
   Loaded last in index.html so these win over web.css, feed.css and the
   page styles.
   ============================================ */

/* The square logo only shows in the rail */
#sidebar-logo #sidebar-rail-mark { display: none; }
#sidebar-rail-scrim { display: none; }

/* ---------- Sticker rail goes first ---------- */
@media (max-width: 1399px) {
  .ad-panel,
  .get-coins-layout .ad-panel {
    display: none !important;
  }
}

/* ---------- Icon rail ---------- */
@media (min-width: 769px) and (max-width: 1180px) {
  #left-sidebar {
    width: 72px;
    min-width: 72px;
    padding: 16px 0 12px;
    transition: width 0.18s ease, min-width 0.18s ease, margin-right 0.18s ease, box-shadow 0.18s ease;
  }

  /* Open: widens over the page. The negative margin keeps the page where
     it is (the rail still takes 72px of the row). Only the open rail is
     lifted above the page, so overlays and sheets still cover the closed one. */
  #left-sidebar.sb-rail-open {
    width: 232px;
    min-width: 232px;
    margin-right: -160px;
    position: relative;
    z-index: 1001;
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.12);
  }

  #sidebar-logo {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    margin: 0 0 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #sidebar-logo:focus-visible { outline: 2px solid #6D28D9; outline-offset: -2px; border-radius: 10px; }

  #sidebar-logo > img:not(#sidebar-rail-mark) { display: none; }
  #sidebar-logo #sidebar-rail-mark {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
  }
  #left-sidebar.sb-rail-open #sidebar-logo { padding: 0 20px; }
  #left-sidebar.sb-rail-open #sidebar-logo > img:not(#sidebar-rail-mark) { display: block; }
  #left-sidebar.sb-rail-open #sidebar-logo #sidebar-rail-mark { display: none; }

  /* Closed: icons only, centered */
  #left-sidebar:not(.sb-rail-open) .nav-item {
    position: relative;
    justify-content: center;
    gap: 0;
    width: auto; /* stickerbook.css gives .nav-item width: 100% */
    padding: 10px 0;
    margin: 0 12px;
  }
  #left-sidebar:not(.sb-rail-open) .nav-item > span:not(.notif-nav-badge):not(.nav-basket-pill):not(.nav-me-avatar) {
    display: none;
  }
  /* Counts sit on the icon's corner */
  #left-sidebar:not(.sb-rail-open) .nav-item .notif-nav-badge,
  #left-sidebar:not(.sb-rail-open) .nav-item .nav-basket-pill {
    position: absolute;
    top: 2px;
    left: calc(50% + 4px);
    margin: 0;
  }
  #left-sidebar:not(.sb-rail-open) .nav-divider { margin: 6px 14px; }
  #left-sidebar:not(.sb-rail-open) .nav-visitor-cta { display: none; }

  .nav-item { white-space: nowrap; }

  html.sb-rail-is-open #sidebar-rail-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.18);
    -webkit-tap-highlight-color: transparent;
  }
}

@media (min-width: 769px) and (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  #left-sidebar { transition: none; }
}

/* ---------- Home: when the comments column won't fit beside the post ---------- */
@media (min-width: 769px) and (max-width: 1023px) {
  /* Touch: phone-style post. The comment button on the card opens the sheet. */
  .feed-post-unit--touch .feed-comments-col {
    display: none !important;
  }
  .feed-post-unit--touch .feed-csheet-panel {
    max-width: 600px;
    margin: 0 auto;
  }

  /* Mouse: the post gets smaller so the comments column keeps 280px.
     100vw minus the rail (72), the feed's padding (32), the gap (20) and
     the column (280). */
  .feed-post-unit:not(.feed-post-unit--touch) {
    --post-h: min(800px, calc(100vh - 132px), calc((100vw - 404px) * 16 / 9));
  }
}

/* ---------- Notifications: one column in tablet portrait ---------- */
.notif-stack-back { display: none; }

@media (min-width: 769px) and (max-width: 1023px) {
  .notif-view {
    position: relative;
  }

  .notif-list-col {
    width: 100%;
    padding: 32px 32px;
  }

  .notif-detail-panel {
    display: none;
    border-left: none;
  }

  .notif-view--open .notif-list-col {
    display: none;
  }

  .notif-view--open .notif-detail-panel {
    display: flex;
    padding-top: 44px;
    animation: notif-stack-in 0.2s ease;
  }

  .notif-view--open .notif-stack-back {
    display: block;
    position: absolute;
    top: 14px;
    left: 20px;
    z-index: 2;
    border: none;
    background: none;
    padding: 8px 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #6D28D9;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

@keyframes notif-stack-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-view--open .notif-detail-panel { animation: none; }
}

/* ---------- Inbox: just the + next to search ---------- */
@media (min-width: 769px) and (max-width: 1180px) {
  #inbox-new-btn.inbox-inline-new-btn {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    justify-content: center;
    gap: 0 !important;
  }

  #inbox-new-btn.inbox-inline-new-btn svg {
    width: 18px;
    height: 18px;
  }

  .inbox-inline-new-label {
    display: none;
  }
}

/* ---------- Sticker Shop: 6 across on tablets ---------- */
@media (min-width: 769px) and (max-width: 1180px) {
  .shop-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---------- Inbox: an open chat is a sheet in tablet portrait ---------- */
#inbox-sheet-scrim { display: none; }

@media (min-width: 769px) and (max-width: 1023px) {
  .inbox-panel {
    border-right: none;
  }

  .chat-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: 56px;
    height: calc(var(--sb-vvh, 100dvh) - 56px);
    z-index: 1003;
    display: none;
    flex-direction: column;
    background: #ffffff;
    border-right: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }

  .chat-panel.mobile-open {
    display: flex;
    animation: inbox-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* The grabber */
  .chat-panel::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: #d4d4d8;
  }

  /* Keyboard up: follow the visible area (inbox/index.js sets sb-kb-chat) */
  html.sb-kb-chat .chat-panel {
    top: calc(var(--sb-vv-top, 0px) + 56px);
  }

  .inbox-split-layout:has(.chat-panel.mobile-open) #inbox-sheet-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1002;
    background: rgba(0, 0, 0, 0.28);
  }

  /* The back button is the sheet's ✕, at the right end of the top bar */
  .chat-panel #chat-back-btn {
    display: flex;
    order: 10;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: #f1f1f4;
    color: #52525b;
    font-size: 14px;
    line-height: 1;
  }

  .chat-panel #chat-back-btn svg {
    display: none;
  }

  .chat-panel #chat-back-btn::before {
    content: '\2715';
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
  }
}

@keyframes inbox-sheet-up {
  from { transform: translateY(40%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel.mobile-open { animation: none; }
}