/* ============================================================
   PC 3-column layout (X/Twitter-like) for the app-shell pages.
   Mobile (<=767px) is untouched: everything below is inert
   until the 768px breakpoint.
   ============================================================ */

.pc-left-nav,
.pc-right-col {
  display: none;
}

@media (min-width: 768px) {
  #bottomNav { display: none !important; }
  body { padding-bottom: 0 !important; }

  .pc-shell {
    display: flex;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* ---- left nav ---- */
  .pc-left-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 72px;
    flex: 0 0 72px;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
    padding: 20px 8px;
    border-right: 1px solid #eee;
  }

  .pc-logo { display: none; }

  .pc-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    border-radius: 9999px;
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
  }
  .pc-nav-item svg { width: 24px; height: 24px; flex-shrink: 0; }
  .pc-nav-item:hover { background: #fff1f2; }
  .pc-nav-item.active { background: #ffe4e6; color: #e11d48; }

  .pc-nav-label { display: none; }

  /* ---- center column ----
     flex-grow:0 (not 1) on purpose: the column is a fixed 600px
     block centered via margin:auto in the remaining flex space.
     (flex-grow:1 + max-width can render inconsistently across
     browsers when the column contains large images.) */
  .pc-center-col {
    flex: 0 1 600px;
    width: 600px;
    max-width: 600px;
    min-width: 0;
    margin: 0 auto;
    min-height: 100vh;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }

  #mainPhoto {
    max-height: 60vh;
  }

  .pc-right-col { display: none; }
}

@media (min-width: 1000px) {
  .pc-left-nav {
    width: 240px;
    flex: 0 0 240px;
    padding: 20px 16px;
  }
  .pc-logo {
    display: block;
    font-size: 20px;
    font-weight: 800;
    padding: 0 12px;
    margin-bottom: 24px;
  }
  .pc-logo .accent { color: #f43f5e; }
  .pc-nav-item { justify-content: flex-start; }
  .pc-nav-label { display: inline; }
}

@media (min-width: 1200px) {
  .pc-right-col {
    display: block;
    width: 320px;
    flex: 0 0 320px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 16px;
  }
}

/* ============================================================
   Right-column dummy widgets
   ============================================================ */

.pc-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid #eee;
  border-radius: 9999px;
  padding: 10px 16px;
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 20px;
}
.pc-search-box svg { width: 16px; height: 16px; flex-shrink: 0; }

.pc-panel {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.pc-panel-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.pc-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  color: inherit;
  text-decoration: none;
}
.pc-suggest-item:last-child { border-bottom: none; }
.pc-suggest-item img {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}
.pc-suggest-name { font-size: 13px; font-weight: 700; }
.pc-suggest-sub { font-size: 11px; color: #9ca3af; }

.pc-filter-row { margin-bottom: 14px; }
.pc-filter-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 6px;
}
.pc-filter-row select,
.pc-filter-row input[type="range"] {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fafafa;
  box-sizing: border-box;
}
.pc-tag-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-tag {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: #f9fafb;
  border: 1px solid #eee;
  color: #6b7280;
}
.pc-tag.selected { background: #ffe4e6; border-color: #ffe4e6; color: #e11d48; }

.pc-filter-submit {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(to right, #fb7185, #e11d48);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}

.pc-chat-profile {
  color: inherit;
  text-decoration: none;
}
.pc-chat-profile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}
.pc-chat-profile-name { font-size: 15px; font-weight: 700; }
.pc-chat-profile-sub { font-size: 12px; color: #9ca3af; margin-bottom: 10px; }
.pc-chat-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.pc-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: #f3f4f6;
  overflow: hidden;
  margin: 10px 0;
}
.pc-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, #fb7185, #e11d48);
}
.pc-hint-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}
.pc-hint-item:last-child { border-bottom: none; }

/* ============================================================
   Sticky "match" CTA bar (profile.html)
   Stays pinned to the bottom of the viewport while scrolling,
   on both mobile and the PC center column (width follows
   .pc-center-col automatically since position:sticky keeps the
   element in normal flow).
   ============================================================ */
.match-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, #fff 65%, rgba(255,255,255,0));
}