/* ============================================================
   Canal QC — Desktop optimization
   Mobile-first base lives in app.css. This file only adds
   progressive enhancement at >=768px and >=1024px.

   Reference: Telegram Web / WhatsApp Web.
   - Mobile: bottom tab bar + edge-to-edge column.
   - Desktop: persistent left nav rail + centered, framed
     content column on a tinted backdrop (the "app window").

   Hard invariants (do NOT break):
   - #app stays the single scroll container (no overflow-y on
     sections or #feed-container).
   - No width:100% on .post-meta-row.
   - #section-chat keeps no opacity transition.
   - z-index map unchanged: header/nav=60, comments=65,
     bottom-bar=66, chatbot-fab=70, chatbot-panel=300.
   - FAB stacking (right edge): chatbot-fab bottom:16px, btn-compose
     bottom:90px (when chatbot visible), scroll-bottom-btn above that.
     --nav-h=0px on desktop collapses mobile calc() — always use
     explicit bottom values for FABs in this file.
   All desktop work below is layout/position only — it never
   touches DOM structure that realtime (insertPostSorted,
   data-fecha, pin state) depends on.
   ============================================================ */

/* ------------------------------------------------------------
   Tier 1 — Tablet & up (>=768px)
   Center the whole app into a framed column on the backdrop.
   Nav still lives at the bottom, but constrained to the frame.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --frame-w:   720px;   /* app window width on tablet            */
    --frame-gap: 24px;    /* breathing room around the frame       */
  }

  /* The backdrop gradient stays full-bleed behind the frame */
  body { background-attachment: fixed; }

  /* #app remains the scroll container. We only narrow + center it
     and give it the framed-window treatment. height/overflow on
     #app are inherited from app.css and intentionally untouched. */
  #app {
    max-width: var(--frame-w);
    margin: 0 auto;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.45);
  }

  /* Fixed children are positioned relative to the viewport, so we
     must re-center them to align with the framed #app column. */
  #app-header,
  #bottom-nav,
  #bottom-bar {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--frame-w);
    transform: translateX(-50%);
  }

  /* Pinned bar floats inside the frame, not the full viewport */
  #pinned-bar {
    left: 50%;
    right: auto;
    width: calc(var(--frame-w) - 24px);
    max-width: calc(100vw - 24px);
    transform: translateX(-50%);
  }
  /* Re-running the slide-in must keep the centering transform */
  @keyframes pinned-slide-in-desktop {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to   { transform: translate(-50%, 0);     opacity: 1; }
  }
  #pinned-bar.slide-in {
    animation: pinned-slide-in-desktop var(--t-slow) var(--ease-out-back);
  }

  /* Comments view: keep it inside the frame instead of full-bleed */
  #section-comments {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--frame-w);
    transform: translate(-50%, 0) translateX(100%);
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
  }
  #section-comments.active {
    transform: translate(-50%, 0);
  }

  /* The in-comments bottom bar re-uses the centered geometry above;
     it already gets left/transform from the #bottom-bar rule. */

  /* Hairline scroll affordances feel better with a touch more room */
  #feed { padding: 18px 18px 8px; }

  /* Historias profile widens slightly for the larger column */
  #historias-header { padding: 24px 24px 16px; }

  /* Ganadores / FAQ become a centered reading column */
  #ganadores-list,
  #faq-list {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   Tier 2 — Desktop & up (>=1024px)
   Full-width layout: left nav rail anchored to viewport edge,
   header and content fill the remaining width.
   Reference: QueensClub.win — dark background edge-to-edge,
   no visible frame borders, rail on the left.
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  :root {
    --rail-w:      104px;
    --nav-h:       0px;
    --nav-float:   0px;
    --safe-bottom: 0px;
  }

  /* Full-width shell — remove the tablet frame borders */
  #app {
    max-width: none;
    margin: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    padding-left: var(--rail-w);
  }

  /* ---- Left nav rail: pinned to viewport left edge ----------- */
  #bottom-nav {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: var(--rail-w);
    max-width: var(--rail-w);
    height: 100dvh;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: calc(var(--safe-top) + 16px) 10px 16px;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(13, 16, 28, 0.95);
    box-shadow: none;
  }
  /* Logo already shown in the header — no duplicate in the rail */
  #bottom-nav::before { display: none; }

  #app.in-comments #bottom-nav { transform: none; }

  .nav-tab {
    flex: 0 0 auto;
    height: auto;
    min-height: 62px;
    padding: 10px 6px;
    border-radius: 12px;
    gap: 5px;
    font-size: var(--fs-caption);
    transition: color 0.18s, background 0.18s;
  }
  .nav-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.05); }
  .nav-tab.active {
    background: var(--primary-dim);
    color: var(--primary);
  }
  .nav-chat-badge { top: 8px; left: calc(50% + 9px); }

  /* ---- Header: spans full width to the right of the rail ----- */
  #app-header {
    left: var(--rail-w);
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
    padding-left: 16px;
    padding-right: 16px;
    grid-template-columns: 44px 1fr 44px;
  }
  /* Title centered in the content column */
  #app-header .header-info {
    margin: 0 auto;
    text-align: center;
  }
  #app-header .header-meta { justify-content: center; }

  #app.in-comments #app-header { display: grid; }

  /* ---- Pinned bar inside content column ---------------------- */
  #pinned-bar {
    left: calc(var(--rail-w) + 12px);
    right: 12px;
    width: auto;
    max-width: none;
    transform: none;
    margin-left: 0;
  }
  @keyframes pinned-slide-in-desktop-rail {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  #pinned-bar.slide-in {
    animation: pinned-slide-in-desktop-rail var(--t-slow) var(--ease-out-back);
  }

  /* ---- Comments view: fills content column ------------------- */
  #section-comments {
    left: var(--rail-w);
    right: 0;
    width: auto;
    max-width: none;
    transform: translateX(100%);
    margin-left: 0;
    border: none;
  }
  #section-comments.active { transform: translateX(0); }

  /* ---- Bottom input bar -------------------------------------- */
  #bottom-bar {
    left: var(--rail-w);
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
    margin-left: 0;
    bottom: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  #app.in-comments #bottom-bar {
    bottom: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* ---- Feed reading column (not edge-to-edge within content) - */
  #feed { max-width: 780px; padding: 20px 24px 8px; }

  /* ---- Historias: 4-column grid ------------------------------ */
  #guardado-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  #historias-header { max-width: 920px; margin: 0 auto; }
  #historias-highlights { max-width: 920px; margin: 0 auto; }

  /* ---- Ganadores / FAQ --------------------------------------- */
  #ganadores-list,
  #faq-list { max-width: 640px; }
  .section-header { max-width: 640px; margin: 0 auto; }

  /* ---- FABs anchored to the right edge ----------------------- */
  #scroll-bottom-btn {
    right: 24px;
    left: auto;
    margin-left: 0;
    bottom: 90px;
  }
  body:has(#chatbot-fab:not(.hidden)) #scroll-bottom-btn {
    bottom: calc(90px + 62px + 12px);
  }
  #chatbot-fab {
    right: 24px;
    left: auto;
    margin-left: 0;
  }
  #btn-compose {
    right: 24px;
    left: auto;
    margin-left: 0;
    bottom: 24px;
  }
  body:has(#chatbot-fab:not(.hidden)) #btn-compose {
    bottom: 90px;
  }

  /* ---- Chatbot: dialog anchored bottom-right ----------------- */
  #chatbot-panel {
    right: 24px;
    left: auto;
    width: 440px;
    max-width: calc(100vw - var(--rail-w) - 48px);
    transform: translateY(100%);
    top: auto;
    bottom: 0;
    height: min(720px, 92dvh);
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.6);
  }
  #chatbot-panel.chatbot-panel--open { transform: translateY(0); }
  .chatbot-header { border-radius: 18px 18px 0 0; }

  /* ---- Post detail overlay ----------------------------------- */
  #post-detail-overlay {
    left: var(--rail-w);
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
    border: none;
  }

  /* Custom scrollbar */
  #app::-webkit-scrollbar { width: 10px; }
}

/* ------------------------------------------------------------
   Tier 3 — Large desktop (>=1440px)
   Feed column widens slightly. No frame borders needed since
   the layout is already full-width.
   ------------------------------------------------------------ */
@media (min-width: 1440px) {
  #feed { max-width: 900px; }
}

/* ------------------------------------------------------------
   Pointer-fine refinements (desktop mice/trackpads).
   Subtle hover states that would be wrong on touch.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .post-bubble { transition: box-shadow 0.15s var(--ease-out); }
  #btn-notify,
  #pinned-bar { transition: background 0.15s var(--ease-out); }
}