/* Social Media Links — Edit Profile & Profile Display */

/* ===== Social Links Container (Edit Profile) ===== */
#social-links-container {
  min-height: 40px;
}

#social-links-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ===== Social Link Item Row ===== */
.social-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--md-surface-container-low);
  border-radius: 12px;
  transition: background 0.2s;
}

.social-link-item:hover {
  background: var(--md-surface-container-high);
}

.social-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.social-link-icon .material-symbols-outlined {
  font-size: 18px !important;
}

.social-link-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.social-link-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--md-on-surface);
  margin-bottom: 2px;
}

.social-link-url {
  font-size: 0.8125rem;
  color: var(--md-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.social-link-url:hover {
  text-decoration: underline;
}

.social-link-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.social-link-actions button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.social-link-actions button:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

.social-link-actions button .material-symbols-outlined {
  font-size: 18px !important;
}

.social-link-move-handle {
  cursor: grab !important;
}

.social-link-move-handle:active {
  cursor: grabbing !important;
}

.social-link-move-handle .material-symbols-outlined {
  opacity: 0.5;
}

.social-link-delete-btn:hover {
  color: #c62828 !important;
}

[data-theme="dark"] .social-link-delete-btn:hover {
  color: #ef9a9a !important;
}

/* ===== Social Link Dialog Overlay ===== */
.social-link-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.social-link-dialog {
  background: var(--md-surface-container-high);
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.social-link-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
}

.social-link-dialog-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--md-on-surface);
}

.social-link-dialog-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.social-link-dialog-close:hover {
  background: var(--md-surface-container-highest);
}

.social-link-dialog-close .material-symbols-outlined {
  font-size: 20px !important;
}

.social-link-dialog-body {
  padding: 8px 20px 20px;
}

.social-link-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
}

.social-link-dialog-footer .md-btn {
  min-width: 80px;
}

/* ===== Social Links on Profile Display ===== */
.pf-social-links-section {
  margin-bottom: 20px;
}

.pf-social-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-social-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  text-decoration: none;
  transition: color 0.15s, opacity 0.2s;
  cursor: pointer;
  position: relative;
  background: transparent !important;
  color: var(--md-on-surface-variant, #49454f) !important;
}

.pf-social-link-btn:hover {
  box-shadow: none;
  color: var(--md-on-surface, #1c1b1f) !important;
}

/* Brand Colors on Hover */
.pf-social-link-btn.platform-instagram:hover { color: #E4405F !important; }
.pf-social-link-btn.platform-facebook:hover { color: #1877F2 !important; }
.pf-social-link-btn.platform-twitter:hover,
.pf-social-link-btn.platform-x:hover { color: #000000 !important; }
.pf-social-link-btn.platform-youtube:hover { color: #FF0000 !important; }
.pf-social-link-btn.platform-tiktok:hover { color: #000000 !important; }
.pf-social-link-btn.platform-linkedin:hover { color: #0A66C2 !important; }
.pf-social-link-btn.platform-github:hover { color: #24292e !important; }
.pf-social-link-btn.platform-telegram:hover { color: #26A5E4 !important; }
.pf-social-link-btn.platform-whatsapp:hover { color: #25D366 !important; }
.pf-social-link-btn.platform-discord:hover { color: #5865F2 !important; }
.pf-social-link-btn.platform-snapchat:hover { color: #D4C900 !important; }
.pf-social-link-btn.platform-pinterest:hover { color: #E60023 !important; }
.pf-social-link-btn.platform-reddit:hover { color: #FF4500 !important; }

.pf-social-link-btn .material-symbols-outlined {
  font-size: 20px !important;
  color: #fff;
}

.pf-social-link-btn .social-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: #313033;
  color: #f4f0f4;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s, transform 0.1s;
  box-shadow: none;
  z-index: 5;
}

.pf-social-link-btn:hover .social-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Platform brand colors */
.pf-social-link-btn.platform-instagram  { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.pf-social-link-btn.platform-facebook    { background: #1877F2; }
.pf-social-link-btn.platform-twitter,
.pf-social-link-btn.platform-x     { background: #000000; }
.pf-social-link-btn.platform-youtube     { background: #FF0000; }
.pf-social-link-btn.platform-tiktok      { background: #000000; }
.pf-social-link-btn.platform-linkedin    { background: #0A66C2; }
.pf-social-link-btn.platform-github      { background: #24292e; }
.pf-social-link-btn.platform-telegram    { background: #26A5E4; }
.pf-social-link-btn.platform-whatsapp    { background: #25D366; }
.pf-social-link-btn.platform-discord     { background: #5865F2; }
.pf-social-link-btn.platform-snapchat    { background: #FFFC00; }
.pf-social-link-btn.platform-pinterest   { background: #E60023; }
.pf-social-link-btn.platform-reddit      { background: #FF4500; }
.pf-social-link-btn.platform-website,
.pf-social-link-btn.platform-language     { background: var(--md-primary); }

/* Snapchat needs dark icon */
.pf-social-link-btn.platform-snapchat .material-symbols-outlined {
  color: #000 !important;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .social-link-dialog {
    max-width: 100%;
    border-radius: 16px;
  }

  .social-link-dialog-header {
    padding: 16px 16px 8px;
  }

  .social-link-dialog-body {
    padding: 4px 16px 16px;
  }

  .social-link-dialog-footer {
    padding: 8px 16px 16px;
  }

  .social-link-item {
    padding: 8px 10px;
    gap: 10px;
  }

  .social-link-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .social-link-icon .material-symbols-outlined {
    font-size: 16px !important;
  }

  .social-link-actions button {
    width: 28px;
    height: 28px;
  }

  .social-link-actions button .material-symbols-outlined {
    font-size: 16px !important;
  }

  /* Profile social links on mobile */
  .pf-social-link-btn {
    width: 24px;
    height: 24px;
  }

  .pf-social-link-btn .material-symbols-outlined {
    font-size: 18px !important;
  }

  .pf-social-link-btn .social-tooltip {
    font-size: 0.6875rem;
    padding: 3px 8px;
  }
}

/* Custom Brand SVGs for Social Media Links */
.platform-instagram .material-symbols-outlined,
.platform-facebook .material-symbols-outlined,
.platform-twitter .material-symbols-outlined,
.platform-x .material-symbols-outlined,
.platform-youtube .material-symbols-outlined,
.platform-tiktok .material-symbols-outlined,
.platform-linkedin .material-symbols-outlined,
.platform-github .material-symbols-outlined,
.platform-telegram .material-symbols-outlined,
.platform-whatsapp .material-symbols-outlined,
.platform-discord .material-symbols-outlined,
.platform-snapchat .material-symbols-outlined,
.platform-pinterest .material-symbols-outlined,
.platform-reddit .material-symbols-outlined {
  display: none !important;
}

.pf-social-link-btn[class*="platform-"]::before,
.social-link-icon[class*="platform-"]::before,
.pf-social-overflow-icon[class*="platform-"]::before {
  content: "";
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--social-icon);
  mask-image: var(--social-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.pf-social-link-btn[class*="platform-"]::before,
.social-link-icon[class*="platform-"]::before {
  width: 16px;
  height: 16px;
}
.pf-social-overflow-icon[class*="platform-"]::before {
  width: 20px;
  height: 20px;
}

.social-link-icon[class*="platform-"]::before {
  width: 18px;
  height: 18px;
}

.platform-instagram {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E");
}
.platform-facebook {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.platform-twitter,
.platform-x {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
.platform-youtube {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M23.498 6.163a3.003 3.003 0 0 0-2.11-2.108C19.53 3.53 12 3.53 12 3.53s-7.53 0-9.388.525a3.003 3.003 0 0 0-2.11 2.108C0 8.02 0 12 0 12s0 3.98.502 5.837a3.003 3.003 0 0 0 2.11 2.108C4.47 20.47 12 20.47 12 20.47s7.53 0 9.388-.525a3.003 3.003 0 0 0 2.11-2.108C24 15.98 24 12 24 12s0-3.98-.502-5.837zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}
.platform-tiktok {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.17-2.86-.74-3.94-1.74-.22-.2-.42-.43-.61-.67-.02 2.44-.01 4.88-.01 7.32-.03 2.12-.51 4.3-1.89 5.96-1.57 1.95-4.17 2.92-6.64 2.66-2.92-.17-5.74-2.1-6.73-4.88-.99-2.73-.39-6.04 1.57-8.22 1.62-1.83 4.19-2.73 6.61-2.4v4.13c-1.31-.22-2.77.16-3.66 1.16-.95 1.04-1.08 2.69-.35 3.9.72 1.25 2.22 1.95 3.64 1.73 1.29-.13 2.42-1.14 2.65-2.42.06-1.67.02-3.35.03-5.02.01-4.83.01-9.66.01-14.49z'/%3E%3C/svg%3E");
}
.platform-linkedin {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z'/%3E%3C/svg%3E");
}
.platform-github {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}
.platform-telegram {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-1-.65-.35-1 .22-1.62.15-.15 2.7-2.46 2.75-2.66.01-.03.01-.15-.07-.22-.08-.07-.19-.05-.27-.03-.12.03-1.93 1.22-5.46 3.61-.52.35-.96.53-1.34.52-.42-.01-1.23-.24-1.83-.43-.74-.24-1.33-.37-1.28-.79.03-.22.33-.45.9-.69 3.53-1.53 5.88-2.54 7.07-3.03 3.37-1.39 4.07-1.63 4.53-1.64.1 0 .33.02.48.15.12.1.16.24.18.33.02.09.03.26.02.39z'/%3E%3C/svg%3E");
}
.platform-whatsapp {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.513 2.262 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.167 1.452 4.767 1.453 5.456 0 9.894-4.437 9.897-9.896a9.8 9.8 0 0 0-2.898-6.992 9.8 9.8 0 0 0-7-2.899c-5.457 0-9.893 4.438-9.897 9.897-.001 1.73.476 3.418 1.38 4.93L1.249 22.8l4.4-1.154z'/%3E%3C/svg%3E");
}
.platform-discord {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.094 13.094 0 0 1-1.873-.894.077.077 0 0 1-.008-.128c.126-.093.252-.19.372-.287a.075.075 0 0 1 .077-.011c3.92 1.793 8.18 1.793 12.061 0a.073.073 0 0 1 .078.009c.12.099.246.195.373.289a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.894.077.077 0 0 1-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.156-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.156 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.156-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.156 2.418z'/%3E%3C/svg%3E");
}
.platform-snapchat {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.001 0c-1.895 0-3.662.333-5.267.977C3.128 2.457 0 5.485 0 11.206c0 1.637.375 2.822.955 3.654.512.735.918 1.139.814 1.704-.15.82-.772 1.488-1.385 2.106a1.353 1.353 0 0 0-.384.819c-.068.749.52 1.298 1.328 1.229 1.402-.121 2.835-.618 4.238-.853.48-.08 1.1.282 1.605.52 1.399.664 3.039.99 4.83.99 1.79 0 3.43-.326 4.83-.99.505-.238 1.125-.6 1.605-.52 1.403.235 2.836.732 4.238.853.808.069 1.396-.48 1.328-1.229a1.353 1.353 0 0 0-.384-.819c-.613-.618-1.235-1.286-1.385-2.106-.104-.565.302-.969.814-1.704.58-.832.955-2.017.955-3.654 0-5.721-3.128-8.749-6.734-10.229C15.663.333 13.896 0 12.001 0zm0 1.5c1.696 0 3.255.303 4.64.87 3.045 1.246 5.36 3.681 5.36 8.836 0 1.378-.316 2.316-.765 2.96-.549.789-1.272 1.464-1.125 2.274.195 1.07.96 1.83 1.583 2.456-.053.03-.188.004-.376-.013-1.637-.14-3.32-.71-4.99-.43-.88.147-1.758.647-2.616 1.052-1.077.51-2.31.795-3.711.795-1.401 0-2.634-.285-3.711-.795-.858-.405-1.736-.905-2.616-1.052-1.67-.28-3.353.29-4.99.43-.188.017-.323.043-.376.013.623-.626 1.388-1.386 1.583-2.456.147-.81-.576-1.485-1.125-2.274-.449-.644-.765-1.582-.765-2.96 0-5.155 2.315-7.59 5.36-8.836 1.385-.567 2.944-.87 4.64-.87z'/%3E%3C/svg%3E");
}
.platform-pinterest {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.965 1.406-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12.017 24c6.62 0 11.988-5.367 11.988-11.987C24.005 5.367 18.636 0 12.017 0z'/%3E%3C/svg%3E");
}
.platform-reddit {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-.762 1.151c.014.153.02.308.02.463 0 2.296-2.617 4.16-5.83 4.16-3.214 0-5.83-1.864-5.83-4.16 0-.155.006-.31.02-.463a1.252 1.252 0 0 1-.762-1.151c0-.688.562-1.25 1.25-1.25.437 0 .817.228 1.036.571a14.28 14.28 0 0 1 3.513-1.027l.745-2.348 2.032.443c.032.53.468.955 1.007.955.556 0 1.008-.452 1.008-1.008s-.452-1.008-1.008-1.008c-.476 0-.875.333-.978.78l-2.22-.485a.256.256 0 0 0-.294.164l-.82 2.585a14.163 14.163 0 0 0-3.535 1.027c.22-.343.6-.571 1.037-.571zm-5.01 5.378c-.688 0-1.25.562-1.25 1.25s.562 1.25 1.25 1.25 1.25-.562 1.25-1.25-.562-1.25-1.25-1.25zm5.01 0c-.688 0-1.25.562-1.25 1.25s.562 1.25 1.25 1.25 1.25-.562 1.25-1.25-.562-1.25-1.25-1.25z'/%3E%3C/svg%3E");
}

.platform-language::before,
.pf-social-link-btn.platform-language::before,
.social-link-icon.platform-language::before,
.social-link-item.platform-language .social-link-icon::before,
.pf-social-overflow-icon.platform-language::before {
  display: none !important;
}

/* Grayscale and alignment for website favicon images */
.pf-social-link-btn img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.15s, opacity 0.15s;
}

.pf-social-link-btn:hover img {
  filter: grayscale(0) opacity(1);
}

.social-link-icon img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 2px;
  filter: grayscale(1) opacity(0.85);
}

/* ===== Social Links "More" Button ===== */
.pf-more-social {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 24px;
  border: none;
  border-radius: 12px;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 6px;
  transition: background 0.15s;
  font-size: 0.6875rem;
  font-weight: 600;
  gap: 1px;
}
.pf-more-social:hover {
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
}
.pf-more-social .material-symbols-outlined {
  font-size: 14px !important;
  font-variation-settings: 'FILL' 0, 'wght' 600;
}

/* ===== Social Links Overflow Bottom Sheet ===== */
.pf-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.42);
  z-index: 1001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.pf-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.pf-modal-bottom-sheet {
  background: var(--md-surface-container-lowest);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  scrollbar-width: thin;
  scrollbar-color: var(--md-outline-variant) transparent;
}
.pf-modal-overlay.active .pf-modal-bottom-sheet {
  transform: translateY(0);
}
.pf-modal-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--md-outline-variant);
  margin: 6px auto 0;
  position: sticky;
  top: 6px;
  z-index: 3;
}
.pf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--md-outline-variant);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--md-surface-container-lowest);
}
.pf-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-on-surface);
}
.pf-modal-close {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--md-on-surface-variant);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.pf-modal-close:hover {
  background: var(--md-surface-container-high);
}
.pf-modal-close .material-symbols-outlined {
  font-size: 20px !important;
}
.pf-modal-body {
  padding: 12px 20px 20px;
}

/* ===== Social Links Overflow List ===== */
.pf-social-overflow-list {
  display: flex;
  flex-direction: column;
}
.pf-social-overflow-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
  transition: opacity 0.15s;
}
.pf-social-overflow-item:last-child {
  border-bottom: none;
}
.pf-social-overflow-item:hover {
  background: var(--md-surface-container-high);
  border-radius: 8px;
}
.pf-social-overflow-item:active {
  background: var(--md-surface-container-highest);
}
.pf-social-overflow-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--md-primary-container);
  color: #fff;
}
.pf-social-overflow-icon .material-symbols-outlined {
  font-size: 16px !important;
  color: #fff !important;
}
.pf-social-overflow-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
  filter: grayscale(1) opacity(0.85);
}
.pf-social-overflow-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-on-surface);
}
.pf-social-overflow-item .material-symbols-outlined:last-child {
  font-size: 18px;
  color: var(--md-on-surface-variant);
}

@media (max-width: 600px) {
  .pf-modal-bottom-sheet {
    max-height: 85vh;
  }
  .pf-modal-header {
    padding: 14px 16px;
  }
  .pf-modal-header h3 {
    font-size: 0.9375rem;
  }
  .pf-modal-body {
    padding: 8px 16px 16px;
  }
  .pf-social-overflow-item {
    gap: 12px;
    padding: 10px 0;
  }
  .pf-social-overflow-item:hover {
    border-radius: 6px;
  }
  .pf-social-overflow-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }
  .pf-social-overflow-label {
    font-size: 0.8125rem;
  }
  .pf-social-overflow-item .material-symbols-outlined:last-child {
    font-size: 16px;
  }
  .pf-social-overflow-icon[class*="platform-"]::before {
    width: 16px;
    height: 16px;
  }
}