/* Anchor for absolute-positioned avatar */
#topicpins .topiclist.forums li.row dl.row-item dt {
  position: relative;
  z-index: 1; /* keep dt above its own content */
}

/* Ensure the lastpost column paints above dt overlays so links remain clickable */
#topicpins .topiclist.forums li.row dl.row-item > dd.lastpost {
  position: relative;
  z-index: 20;              /* above dt and its absolutely-positioned children */
  pointer-events: auto;     /* ensure interactions are enabled */
  /* Show only a left divider on the lastpost column */
  border-left: 1px solid var(--topicpins-sep, rgba(0, 0, 0, 0.12));
}

/* Also ensure the content inside lastpost is clickable */
#topicpins .topiclist.forums li.row dl.row-item > dd.lastpost span,
#topicpins .topiclist.forums li.row dl.row-item > dd.lastpost a {
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

/* Center the avatar in front of the text (adjusted placement per your values) */
#topicpins .topicpins-avatar {
  position: absolute;
  top: 30%;
  left: 25px;
  transform: translate(-50%, -50%);

  width: 40px;
  height: 40px;
  max-width: 64px;
  max-height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  z-index: 5; /* above .list-inner, below lastpost */

  /* Let clicks pass through to links below (remove if avatar must be clickable) */
  pointer-events: none;
}

/* Ensure avatar fills the circle and crops nicely */
#topicpins .topicpins-avatar .forum-image,
#topicpins .topicpins-avatar .forum-image img,
#topicpins .topicpins-avatar img,
#topicpins .topicpins-avatar .avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Fallback (no avatar HTML) */
#topicpins .topicpins-avatar .mchat-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Keep the text below the avatar in a lower layer */
#topicpins .list-inner {
  position: relative;
  z-index: 1;
}

/* HIDE THE MIDDLE VERTICAL LINE(S) BUT KEEP COLUMN WIDTHS
   Only affects data rows, not the header row */
#topicpins .topiclist.forums li.row dl.row-item > dt,
#topicpins .topiclist.forums li.row dl.row-item > dd {
  border-left: 0 !important;
  border-right: 0 !important;
  background-image: none; /* ensure no gradient separators */
}

#topicpins .topiclist.forums li.row dl.row-item > dd.lastpost,
#topicpins .topiclist.forums li.row dl.row-item > dd.topics {
  border-left: 1px solid #FFFFFF !important;
  border-right: 0 !important; /* keep right side clean */
  background-image: none;
}

/* Existing content clipping for previews */
.topicpins-container #topicpins .content {
  max-height: 4.8em;
  margin-top: 8px;
  overflow: hidden;
}

/* Placement helper for optional post-after location */
.topicpins-action {
  margin-top: 6px;
  text-align: right;
}

/* Default pin icon color (only red when pinned) */
.topicpins-btn .icon {
  color: #888;
  transition: color .15s ease, transform .15s ease;
}
.topicpins-btn:hover .icon {
  color: #333;
}

/* Pinned state: rotate the pin to the side and make it red */
.topicpins-btn.is-pinned .icon {
  color: #d93f3f;
  transform: rotate(90deg); /* in addition to fa-rotate-90 as a fallback */
}

/* Flash message */
#topicpins-flash.topicpins-flash {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 10px 14px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-size: 13px;
  display: none;
}
#topicpins-flash.success { background: #2e7d32; }
#topicpins-flash.error   { background: #c62828; }

/* Inline confirm popover */
.topicpin-confirm {
  position: absolute;
  z-index: 10010;
  background: #fff;
  color: #333;
  border: 1px solid #ccd6e0;
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.2;
}
.topicpin-confirm::before,
.topicpin-confirm::after {
  content: '';
  position: absolute;
  top: -6px;
  right: 12px;
  border-width: 6px;
  border-style: solid;
}
.topicpin-confirm::before { border-color: transparent transparent #ccd6e0 transparent; }
.topicpin-confirm::after  { top: -5px; border-color: transparent transparent #fff transparent; }

.topicpin-confirm .text { white-space: nowrap; }
.topicpin-confirm .actions { display: inline-flex; gap: 6px; }

.topicpin-confirm .btn {
  border: 0;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
}
.topicpin-confirm .btn--danger { background: #d93f3f; color: #fff; }
.topicpin-confirm .btn--danger:hover { background: #c53636; }
.topicpin-confirm .btn--muted { background: #eef2f7; color: #333; }
.topicpin-confirm .btn--muted:hover { background: #e4eaf2; }

/* Small screens: scale avatar a bit smaller */
@media (max-width: 640px) {
  #topicpins .topicpins-avatar {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
  }
}

/* Prevent confirm from overflowing viewport on very small screens */
@media (max-width: 350px) {
  .topicpin-confirm { max-width: calc(100vw - 16px); right: 8px; left: 8px !important; }
  .topicpin-confirm .text { white-space: normal; }
}

/* Inline Unpin button next to the subject */
#topicpins .topicpins-btn--inline {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.9;
  text-decoration: none;
}
#topicpins .topicpins-btn--inline:hover {
  opacity: 1;
  text-decoration: none;
}
#topicpins .topicpins-btn--inline .icon {
  color: #d93f3f; /* match pinned state color */
}

/* Optional: small spacing after subject text so icons don't touch */
#topicpins .lastsubject { margin-right: 2px; }
  
/* Fade-out row when unpinned (no reload) */
#topicpins li.row.topicpins-removing {
  opacity: 0;
  transition: opacity .28s ease;
}

/* Fade-out whole Topic Pins block when it becomes empty */
#topicpins.topicpins-container-removing {
  opacity: 0;
  transition: opacity .28s ease;
}

/* --- Responsive: make controls usable on very small screens (threshold set to 350px) --- */

/* Ensure the pin button is visible inside responsive menus / dropdown clones.
   Threshold set to 350px width and 350px height. Icon-only on extremely small viewports. */
@media (max-width: 350px), (max-height: 350px) {
  /* Show cloned pin button inside dropdowns and responsive menu */
  .dropdown .topicpins-btn,
  .responsive-menu .topicpins-btn,
  .post-buttons .topicpins-btn.responsive-show,
  .post-buttons .topicpins-btn.js-topicpins-pin,
  .post-buttons .topicpins-btn.js-topicpins-unpin {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 6px 0 0;
    height: auto;
    min-width: 28px;
    padding: 4px 6px;
    box-sizing: border-box;
  }

  /* If phpBB adds "hidden" or "responsive-hide" classes, override them only for the pin button */
  .post-buttons .responsive-hide.topicpins-btn,
  .post-buttons .hidden.topicpins-btn,
  .dropdown .hidden .topicpins-btn,
  .dropdown .responsive-hide .topicpins-btn {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Make sure icon is visible and sized properly in compact UI */
  .dropdown .topicpins-btn .icon,
  .post-buttons .topicpins-btn .icon {
    font-size: 12px;
    line-height: 1;
    color: #888;
  }
  .dropdown .topicpins-btn.is-pinned .icon,
  .post-buttons .topicpins-btn.is-pinned .icon {
    color: #d93f3f;
    transform: rotate(90deg);
  }

  /* For extremely small viewports prefer icon-only to save space */
  .dropdown .topicpins-btn span,
  .responsive-menu .topicpins-btn span {
    display: none !important;
  }

  /* Make the pin link look like other menu links */
  .dropdown .topicpins-btn {
    text-decoration: none;
    background: transparent;
    border: 0;
  }

  /* Reduce confirm popover footprint on very small screens */
  .topicpin-confirm {
    padding: 6px 6px;
    gap: 6px;
    font-size: 11px;
  }
}

/* Extra: prevent avatar overlay interfering with responsive menu items on very small screens */
@media (max-width: 350px), (max-height: 350px) {
  /* ensure avatar container does not block dropdown interactions */
  #topicpins .topicpins-avatar {
    pointer-events: none; /* keep taps hitting buttons/links under/around it */
    width: 36px;
    height: 36px;
  }

  /* Slightly smaller avatars and tighter spacing for narrow/short viewports */
  #topicpins .topicpins-avatar {
    top: 28%;
    left: 20px;
    transform: translate(-50%, -50%);
  }

  /* In compact view shrink the inline pin button spacing */
  #topicpins .topicpins-btn--inline {
    margin-left: 4px;
  }
}

/* Additional small tweak for extremely narrow widths to keep layout usable */
@media (max-width: 320px), (max-height: 320px) {
  #topicpins .topicpins-avatar {
    width: 28px;
    height: 28px;
    left: 16px;
  }
  /* Make sure confirm popover doesn't overflow */
  .topicpin-confirm {
    right: 8px;
    left: 8px !important;
    max-width: calc(100vw - 16px);
  }
}

 /* Highest-priority selectors for the responsive menu dropdown clones */
li.responsive-menu.dropdown-container.dropdown-left.dropdown-down .dropdown li.clone .topicpins-btn,
li.responsive-menu.dropdown-container.dropdown-left.dropdown-down .dropdown li.responsive-hide.clone .topicpins-btn,
.responsive-menu.dropdown-container .dropdown li.clone .topicpins-btn,
.responsive-menu .dropdown li.clone .topicpins-btn,
.responsive-menu .dropdown li.responsive-hide.clone .topicpins-btn,
.dropdown.dropdown-nonscroll li.clone .topicpins-btn,
.dropdown.dropdown-nonscroll li.responsive-hide.clone .topicpins-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  min-width: 28px !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}

/* If the clone element itself is hidden, unhide only the clone list item that contains a topicpins-btn */
.responsive-menu .dropdown li.responsive-hide.clone,
.responsive-menu .dropdown li.hidden.clone {
  display: list-item !important;
}

/* Make the pin icon compact in the dropdown (icon-only on very small screens) */
.responsive-menu .dropdown .topicpins-btn .icon,
.dropdown .topicpins-btn .icon {
  font-size: 13px !important;
  line-height: 1 !important;
  color: #888 !important;
}

/* Keep pinned visual state in the dropdown */
.responsive-menu .dropdown .topicpins-btn.is-pinned .icon,
.dropdown .topicpins-btn.is-pinned .icon {
  color: #d93f3f !important;
  transform: rotate(90deg) !important;
}

/* Optional: show label text in larger dropdowns, but keep icon-only on tiny viewports */
@media (min-width: 360px) {
  .responsive-menu .dropdown .topicpins-btn span,
  .dropdown .topicpins-btn span {
    display: inline !important;
  }
}
@media (max-width: 359px), (max-height: 359px) {
  .responsive-menu .dropdown .topicpins-btn span,
  .dropdown .topicpins-btn span {
    display: none !important;
  }
}

/* Ensure link style (matches other dropdown links) */
.responsive-menu .dropdown .topicpins-btn {
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
}