/* W2D Friends — Modern Refresh
   Scope everything under #w2dm-friends to avoid theme bleed.
   Includes: pill subtabs, card grid, buttons, skeleton shimmer,
   Find search UI, and Suggestions scaffold (mutual/nearby).
*/

:root{
  /* Neutrals & surfaces */
  --w2d-surface: #ffffff;
  --w2d-surface-2: #f8fafc;
  --w2d-border:  #e5e7eb;
  --w2d-text:    #0f172a;
  --w2d-muted:   #64748b;
  --w2d-ring:    #94a3b8;

  /* Accent palette (tweak to your brand) */
  --w2d-accent:       #7c3aed; /* primary accent (tabs, primary buttons) */
  --w2d-accent-600:   #6d28d9;
  --w2d-accent-700:   #5b21b6;
  --w2d-accent-soft:  #f3e8ff;

  /* Actions */
  --w2d-danger: #e11d48;
  --w2d-danger-700:#be123c;

  /* Shadows & motion */
  --w2d-shadow-sm: 0 4px 14px rgba(2,6,23,.06);
  --w2d-shadow-md: 0 8px 30px rgba(2,6,23,.08);

  /* Radii */
  --w2d-radius: 16px;

  /* Timings */
  --w2d-t-fast: .14s;
  --w2d-t-med:  .22s;
}

/* Wrapper */
#w2dm-friends{ display:block; }

/* ---------------------------------------
   Subtabs (Friends / Requests / Blocked / Find)
---------------------------------------- */
#w2dm-friends .w2dm-subtabs{
  position: sticky; top: 0; z-index: 5;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding: 8px 10px;
  background: var(--w2d-surface);
  border-bottom: 1px solid var(--w2d-border);
  backdrop-filter: saturate(120%) blur(4px);
}
#w2dm-friends .w2dm-subtabs a{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--w2d-border);
  background:#fff;
  color:var(--w2d-text);
  text-decoration:none;
  font-weight:700; font-size:14px; line-height:1;
  padding: 10px 14px;
  border-radius: 999px;
  transition: background var(--w2d-t-fast), border-color var(--w2d-t-fast), color var(--w2d-t-fast), box-shadow var(--w2d-t-fast), transform var(--w2d-t-fast);
}
#w2dm-friends .w2dm-subtabs a:hover{
  background:#fafafa;
  border-color:#e6e6e6;
}
#w2dm-friends .w2dm-subtabs a.is-active{
  background: var(--w2d-accent);
  border-color: var(--w2d-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124,58,237,.22);
}

/* ---------------------------------------
   Grid of person cards
---------------------------------------- */
ul.w2dm-cards{
  list-style:none; margin:0; padding:16px;
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

ul.w2dm-cards > li.w2dm-card{
  display:grid;
  grid-template-areas:
    "avatar"
    "slug"
    "name"
    "actions";
  grid-auto-rows:auto;
  row-gap:10px;
  align-content:start;
  justify-items:center;
  text-align:center;

  background: var(--w2d-surface);
  border:1px solid var(--w2d-border);
  border-radius: var(--w2d-radius);
  box-shadow: var(--w2d-shadow-sm);
  padding: 22px 18px;

  transition: box-shadow var(--w2d-t-med), transform var(--w2d-t-med), border-color var(--w2d-t-fast);
}
ul.w2dm-cards > li.w2dm-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--w2d-shadow-md);
  border-color: #e2e8f0;
}

.w2dm-card__avatar{ grid-area: avatar; }
.w2dm-card__name{ grid-area: name; }
.w2dm-card__slug{ grid-area: slug; color: var(--w2d-muted); font-size:.95rem; }
.w2dm-card__actions{ grid-area: actions; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

.w2dm-card__avatar img{
  width:132px !important; height:132px !important; object-fit:cover; object-position:center;
  border-radius:50%;
  border: 3px solid var(--w2d-border);
  background:#f6f7fb;
  box-shadow: inset 0 0 0 3px #fff;
}

.w2dm-card__name,
.w2dm-card__name a{
  font-weight:800; font-size:1.15rem; text-decoration:none; color:var(--w2d-text);
}
.w2dm-card__name a:hover{ text-decoration:underline; }

/* ---------------------------------------
   Buttons (match your JS classes)
---------------------------------------- */
.w2dm-button,
.w2dm-button-secondary{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  border:1px solid var(--w2d-border);
  background:#fff; color:var(--w2d-text);
  font-weight:700; font-size:14px; line-height:1;
  padding: 10px 14px;
  border-radius: 12px;
  transition: transform var(--w2d-t-fast), background var(--w2d-t-fast), border-color var(--w2d-t-fast), box-shadow var(--w2d-t-fast);
}
.w2dm-button:active,
.w2dm-button-secondary:active{ transform: translateY(1px); }

.w2dm-button{
  background: var(--w2d-accent);
  border-color: var(--w2d-accent);
  color:#fff;
}
.w2dm-button:hover{ background: var(--w2d-accent-600); border-color: var(--w2d-accent-600); }
.w2dm-button:focus-visible{ outline:2px solid var(--w2d-accent-soft); outline-offset:2px; }

.w2dm-button-secondary:hover{ background:#f3f4f6; border-color:#e5e7eb; }

/* Special tints for clarity */
[data-friend-toggle][data-action="remove"],
[data-friend-toggle][data-action="block"]{
  background:#fff; color: var(--w2d-danger);
  border-color: #fecdd3;
}
[data-friend-toggle][data-action="remove"]:hover,
[data-friend-toggle][data-action="block"]:hover{
  background:#fff1f2; border-color:#fda4af;
}
[data-friend-toggle][data-action="unblock"]{
  color:#0f766e; border-color:#99f6e4;
}
[data-friend-toggle][data-action="unblock"]:hover{
  background:#ecfeff; border-color:#67e8f9;
}

/* Message button reads as strong secondary */
.w2dm-card__actions [data-dm-launch]{
  background:#111827; border-color:#111827; color:#fff;
}
.w2dm-card__actions [data-dm-launch]:hover{ filter:brightness(.95); }

/* ---------------------------------------
   Loading states
---------------------------------------- */
#w2dm-friends-list{
  min-height: 200px;
  transition: opacity var(--w2d-t-fast);
}
#w2dm-friends-list.is-loading{ opacity:.65; }

/* Skeleton shimmer */
@keyframes w2d-shimmer {
  0% { background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}
.w2dm-cards.is-skeleton .is-skel{ pointer-events:none; }
.skel{
  display:inline-block;
  background: linear-gradient(90deg, #eceff3 0%, #f5f7fa 50%, #eceff3 100%);
  background-size: 200% 100%;
  animation: w2d-shimmer 1.2s linear infinite;
  border-radius: 8px;
}
.skel--avatar{ width:132px; height:132px; border-radius:50%; }
.skel--line{ height:12px; width:60%; }
.skel--btn{ height:36px; width:90px; border-radius:999px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #w2dm-friends-list,
  .w2dm-subtabs a,
  .w2dm-button,
  .w2dm-button-secondary{ transition:none; }
  .skel{ animation:none; }
}

/* ---------------------------------------
   Find tab — search UI + suggestions scaffold
---------------------------------------- */
.w2dm-find-wrap{ padding: 14px; background: var(--w2d-surface); }
.w2dm-search{
  position:relative; display:block;
  margin: 6px 0 10px 0;
}
.w2dm-search input[type="search"]{
  width:100%; height:44px;
  border-radius: 12px;
  border:1px solid var(--w2d-border);
  padding: 0 14px 0 40px;
  font-size: 15px; color: var(--w2d-text);
  background: var(--w2d-surface-2);
  transition: border-color var(--w2d-t-fast), box-shadow var(--w2d-t-fast), background var(--w2d-t-fast);
}
.w2dm-search input[type="search"]::placeholder{ color: var(--w2d-muted); }
.w2dm-search input[type="search"]:focus{
  outline:none;
  border-color: var(--w2d-accent);
  background:#fff;
  box-shadow: 0 0 0 3px var(--w2d-accent-soft);
}
.w2dm-search::before{
  content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:.6;
  background:
    radial-gradient(circle at 40% 40%, #334155 35%, transparent 36%) 0 0/100% 100%,
    radial-gradient(circle at 70% 70%, #334155 35%, transparent 36%) 0 0/100% 100%;
  border-radius:50%;
}

/* Search results list uses the same card grid */
.w2dm-find-results{ margin-top: 12px; }

/* ---------------------------------------
   Suggestions: "People you may know"
   (scaffold; JS will fill #w2dm-suggest-list)
---------------------------------------- */
.w2dm-suggest{
  border:1px dashed var(--w2d-border);
  border-radius: var(--w2d-radius);
  padding: 12px;
  background: #fcfcff;
  margin-bottom: 12px;
}
.w2dm-suggest__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-bottom: 10px;
}
.w2dm-suggest__head h3{
  margin:0; font-weight:800; font-size: 1rem; color: var(--w2d-text);
}
.w2dm-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.w2dm-chip{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:#fff; border:1px solid var(--w2d-border); color:var(--w2d-text);
  padding: 6px 10px; border-radius: 999px; font-weight:700; font-size:13px;
  transition: background var(--w2d-t-fast), border-color var(--w2d-t-fast), color var(--w2d-t-fast);
}
.w2dm-chip:hover{ background:#f3f4f6; }
.w2dm-chip.is-active{
  background: var(--w2d-accent); color:#fff; border-color: var(--w2d-accent);
  box-shadow: 0 6px 18px rgba(124,58,237,.15);
}
.w2dm-suggest__grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ---------------------------------------
   Misc helpers
---------------------------------------- */
.w2dm-muted{ color: var(--w2d-muted); padding: 16px; }
.w2dm-error{ color: #b91c1c; padding: 16px; }

/* === Buttons: one system ================================================== */
.w2dm-card__actions .w2dm-button,
.w2dm-card__actions .w2dm-button-secondary{
  --btn-h: 36px;
  height: var(--btn-h);
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--bd-neutral, #d1d5db);
  background: #fff;
  color: var(--txt-ghost, #374151);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .08s ease;
}
.w2dm-card__actions .w2dm-button:active,
.w2dm-card__actions .w2dm-button-secondary:active { transform: translateY(1px); }
.w2dm-card__actions .w2dm-button:disabled,
.w2dm-card__actions .w2dm-button-secondary:disabled { opacity:.55; cursor:not-allowed; }

/* Primary filled: Add + Accept */
.w2dm-card__actions [data-friend-toggle][data-action="add"],
.w2dm-card__actions [data-friend-toggle][data-action="accept"]{
  background: var(--btn-blue, #2563eb);
  border-color: var(--btn-blue, #2563eb);
  color: #fff;
}
.w2dm-card__actions [data-friend-toggle][data-action="add"]:hover,
.w2dm-card__actions [data-friend-toggle][data-action="accept"]:hover{
  background: var(--btn-blue-hover, #1d4ed8);
  border-color: var(--btn-blue-hover, #1d4ed8);
}

/* Neutral filled: Message */
.w2dm-card__actions [data-dm-launch]{
  background: var(--btn-slate, #374151);
  border-color: var(--btn-slate, #374151);
  color: #fff;
}
.w2dm-card__actions [data-dm-launch]:hover{
  background: var(--btn-slate-hover, #303846);
  border-color: var(--btn-slate-hover, #303846);
}

/* Quiet outlines: Cancel / Decline / Remove */
.w2dm-card__actions [data-friend-toggle][data-action="cancel"],
.w2dm-card__actions [data-friend-toggle][data-action="decline"],
.w2dm-card__actions [data-friend-toggle][data-action="remove"]{
  background: #fff;
  color: var(--txt-ghost-dk, #111827);
  border-color: var(--bd-neutral, #d1d5db);
}
.w2dm-card__actions [data-friend-toggle][data-action="cancel"]:hover,
.w2dm-card__actions [data-friend-toggle][data-action="decline"]:hover,
.w2dm-card__actions [data-friend-toggle][data-action="remove"]:hover{
  background: var(--bg-ghost-hover, #f9fafb);
  border-color: var(--bd-neutral-2, #cbd5e1);
}

/* Tinted outlines: Block / Unblock */
.w2dm-card__actions [data-friend-toggle][data-action="block"]{
  background:#fff; color: var(--txt-danger, #b91c1c); border-color: var(--bd-neutral, #d1d5db);
}
.w2dm-card__actions [data-friend-toggle][data-action="block"]:hover{
  background: var(--bg-ghost-hover, #f9fafb); border-color: var(--bd-neutral-2, #cbd5e1);
}
.w2dm-card__actions [data-friend-toggle][data-action="unblock"]{
  background:#fff; color: var(--txt-success, #065f46); border-color: var(--bd-neutral, #d1d5db);
}
.w2dm-card__actions [data-friend-toggle][data-action="unblock"]:hover{
  background: var(--bg-ghost-hover, #f9fafb); border-color: var(--bd-neutral-2, #cbd5e1);
}

/* Focus clarity */
.w2dm-card__actions .w2dm-button:focus-visible,
.w2dm-card__actions .w2dm-button-secondary:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--btn-blue, #2563eb) 70%, white);
  outline-offset: 2px;
}

/* === Find results: ensure same container/grid ============================= */
.w2dm-find-results > .w2dm-cards,
.w2dm-find-results ul.w2dm-cards{
  list-style:none; margin:0; padding:var(--w2d-gap,16px);
  display:grid; gap:var(--w2d-gap,16px);
  grid-template-columns:repeat(auto-fill, minmax(360px,1fr));
}

.w2dm-card--find{
  /* exactly like the normal card (inherits your existing card styles) */
  background: var(--w2d-card-bg,#fff);
  border:1px solid var(--w2d-border,#e5e7eb);
  border-radius:16px; box-shadow: var(--w2d-shadow, 0 6px 20px rgba(0,0,0,.06));
  padding:24px 20px; text-align:center;
}

/* Slightly smaller avatar on Find to fit 3 actions neatly */
.w2dm-card--find .w2dm-card__avatar img{
  width:120px !important; height:120px !important; border-radius:50%; object-fit:cover; border:3px solid var(--w2d-border,#e5e7eb);
}

/* Find chips — Mutual / Nearby */
#w2dm-friends .w2dm-chips{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}

#w2dm-friends .w2dm-chip{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 12px;
  border-radius:9999px; /* keep rounded on hover/focus */
  border:1px solid var(--w2d-border);
  background:#fff; color:var(--w2d-text);
  font:700 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor:pointer; user-select:none;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s ease;
}
#w2dm-friends .w2dm-chip:hover{
  background:#f9fafb; border-color:#e2e8f0;
}
#w2dm-friends .w2dm-chip:active{
  transform: translateY(1px);
}
#w2dm-friends .w2dm-chip:focus-visible{
  outline:2px solid color-mix(in srgb, var(--w2d-accent) 60%, white);
  outline-offset:2px;
}
#w2dm-friends .w2dm-chip.is-active{
  background:var(--w2d-accent);
  border-color:var(--w2d-accent);
  color:#fff;
  box-shadow:0 6px 16px rgba(124,58,237,.18);
}

/* Little icons */
#w2dm-friends .w2dm-chip[data-suggest="mutual"]::before{
  content:"👥"; font-size:14px; line-height:1;
}
#w2dm-friends .w2dm-chip[data-suggest="nearby"]::before{
  content:"📍"; font-size:14px; line-height:1;
}

/* Compact on small screens */
@media (max-width:480px){
  #w2dm-friends .w2dm-chip{ height:32px; padding:0 10px; font-size:12.5px; }
}

/* Center avatars in Find results */
#w2dm-friends .w2dm-find-results .w2dm-card--find .w2dm-card__avatar{
  display:flex;
  justify-content:center;
  text-align:center;        /* fallback */
}

#w2dm-friends .w2dm-find-results .w2dm-card--find .w2dm-card__avatar img{
  display:block;
  margin-inline:auto;       /* centers the circle */
}

/* --- Buttons: prevent hover wobble (consistent border/radius) --- */
#w2dm-friends .w2dm-card__actions .w2dm-button,
#w2dm-friends .w2dm-card__actions .w2dm-button-secondary,
#w2dm-friends .w2dm-card__actions [data-friend-toggle]{
  box-sizing:border-box;
  border-width:1px !important;
  border-style:solid !important;
  border-radius:12px !important;
}
#w2dm-friends .w2dm-card__actions [data-friend-toggle]:hover,
#w2dm-friends .w2dm-card__actions [data-dm-launch]:hover{
  border-width:1px !important;          /* keep width */
  border-radius:12px !important;         /* keep curvature */
}

/* Outline hovers keep a border (no jump) */
#w2dm-friends .w2dm-card__actions [data-friend-toggle][data-action="remove"]:hover,
#w2dm-friends .w2dm-card__actions [data-friend-toggle][data-action="cancel"]:hover,
#w2dm-friends .w2dm-card__actions [data-friend-toggle][data-action="decline"]:hover,
#w2dm-friends .w2dm-card__actions [data-friend-toggle][data-action="block"]:hover,
#w2dm-friends .w2dm-card__actions [data-friend-toggle][data-action="unblock"]:hover{
  background: var(--bg-ghost-hover, #f9fafb) !important;
  border-color: var(--bd-neutral-2, #cbd5e1) !important;
}

/* --- Find: make grid/cards match normal cards, and center avatars --- */
#w2dm-friends .w2dm-find-results .w2dm-cards,
#w2dm-friends .w2dm-cards--find{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  padding:16px;
  list-style:none;
  margin:0;
}
#w2dm-friends .w2dm-cards--find > .w2dm-card,
#w2dm-friends .w2dm-cards--find > li.w2dm-card,
#w2dm-friends .w2dm-find-results .w2dm-cards > .w2dm-card{
  display:grid;
  grid-template-areas:"avatar" "slug" "name" "actions";
  justify-items:center;
  row-gap:10px;
  text-align:center;
  background:var(--w2d-surface, #fff);
  border:1px solid var(--w2d-border, #e5e7eb);
  border-radius:var(--w2d-radius, 16px);
  box-shadow:var(--w2d-shadow-sm, 0 4px 14px rgba(2,6,23,.06));
  padding:22px 18px;
}
#w2dm-friends .w2dm-card--find .w2dm-card__avatar,
#w2dm-friends .w2dm-find-results .w2dm-card__avatar{
  display:flex; justify-content:center;
}
#w2dm-friends .w2dm-card--find .w2dm-card__avatar img{
  margin:0 auto;
  width:120px !important; height:120px !important;
  border-radius:50%; object-fit:cover;
  border:3px solid var(--w2d-border, #e5e7eb);
}


/* Force multi-column grid for Find results (override theme's .grid = 1fr) */
#w2dm-friends .w2dm-find-results ul.w2dm-cards,
#w2dm-friends ul.w2dm-cards.w2dm-cards--find{
  display: grid !important;
  grid-auto-flow: row dense !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  padding: 16px !important;
}

/* Ensure each card only spans one track */
#w2dm-friends ul.w2dm-cards.w2dm-cards--find > *{
  grid-column: auto / span 1 !important;
}

/* --- Fix Find tab layout + avatar centering --- */
#w2dm-friends .w2dm-find-results > ul.w2dm-cards,
#w2dm-friends ul.w2dm-cards--find{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
  margin: 0;
  width: 100% !important;       /* prevent skinny column */
  box-sizing: border-box;
}
#w2dm-friends ul.w2dm-cards--find > li{ min-width: 0; }

#w2dm-friends .w2dm-card--find .w2dm-card__avatar{
  display: flex; justify-content: center; align-items: center;
}
#w2dm-friends .w2dm-card--find .w2dm-card__avatar img{ margin: 0 auto; }

/* --- Keep button size identical on hover (no jiggle) --- */
#w2dm-friends .w2dm-card__actions .w2dm-button,
#w2dm-friends .w2dm-card__actions .w2dm-button-secondary,
#w2dm-friends .w2dm-card__actions [data-friend-toggle]{
  border: 1px solid var(--bd-neutral, #d1d5db);
  border-radius: 12px;
}
#w2dm-friends .w2dm-card__actions .w2dm-button:hover,
#w2dm-friends .w2dm-card__actions .w2dm-button-secondary:hover,
#w2dm-friends .w2dm-card__actions [data-friend-toggle]:hover{
  border-color: var(--bd-neutral-2, #cbd5e1); /* keep border on hover */
}

/* --- Force Find tab to use the same multi-column grid --- */
#w2dm-friends .w2dm-find-results{ display:block; width:100%; }

#w2dm-friends .w2dm-find-results > ul.w2dm-cards,
#w2dm-friends ul.w2dm-cards--find{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  grid-auto-flow: row dense;
  grid-auto-columns: auto;
  gap: 16px;
  padding: 16px;
  margin: 0;
  width: 100% !important;         /* kill any 285px width from old CSS */
  max-width: none !important;
  box-sizing: border-box;
}
#w2dm-friends .w2dm-find-results > ul.w2dm-cards > li{ width:auto !important; }

/* Center avatars in Find cards */
#w2dm-friends .w2dm-card--find .w2dm-card__avatar{
  display:flex; justify-content:center; align-items:center;
}
#w2dm-friends .w2dm-card--find .w2dm-card__avatar img{ margin:0 auto; }

/* No button jiggle on hover (keep border & radius identical) */
#w2dm-friends .w2dm-card__actions .w2dm-button,
#w2dm-friends .w2dm-card__actions .w2dm-button-secondary,
#w2dm-friends .w2dm-card__actions [data-friend-toggle]{
  border:1px solid var(--bd-neutral, #d1d5db);
  border-radius:12px;
}
#w2dm-friends .w2dm-card__actions .w2dm-button:hover,
#w2dm-friends .w2dm-card__actions .w2dm-button-secondary:hover,
#w2dm-friends .w2dm-card__actions [data-friend-toggle]:hover{
  border:1px solid var(--bd-neutral-2, #cbd5e1); /* same thickness on hover */
}
/* Force Find results to use the same multi-column grid */
#w2dm-friends .w2dm-find-results { width:100%; display:block; }

#w2dm-friends .w2dm-find-results > ul.w2dm-cards,
#w2dm-friends .w2dm-find-results > ul.w2dm-cards--find,
#w2dm-friends .w2dm-find-results ul.w2dm-cards.w2dm-cards--find{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  padding: 16px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;  /* kill the ~285px constraint */
  box-sizing: border-box !important;
}

/* Make sure items don’t carry a fixed width */
#w2dm-friends .w2dm-find-results ul.w2dm-cards > li,
#w2dm-friends .w2dm-find-results ul.w2dm-cards--find > li{
  width: auto !important;
}

/* Center avatars in Find cards */
#w2dm-friends .w2dm-card--find .w2dm-card__avatar{
  display:flex; justify-content:center; align-items:center;
}
#w2dm-friends .w2dm-card--find .w2dm-card__avatar img{ margin:0 auto; }

/* Kill dashed border on suggestions block */
#w2dm-friends .w2dm-suggest{
  border: 0 !important;
  /* keep the background if you like; or set to transparent */
  background: var(--w2d-surface);
}

/* Remove card borders everywhere (normal + find) */
#w2dm-friends ul.w2dm-cards > li.w2dm-card,
#w2dm-friends .w2dm-cards--find > .w2dm-card,
#w2dm-friends .w2dm-card.w2dm-card--find{
  border: 0 !important;
}

/* Preserve the nice hover lift without re-adding a border */
#w2dm-friends ul.w2dm-cards > li.w2dm-card:hover,
#w2dm-friends .w2dm-cards--find > .w2dm-card:hover{
  border-color: transparent !important;
  box-shadow: var(--w2d-shadow-md);
}

/* Remove the panel/board around the results area */
#w2dm-friends #w2dm-friends-list,
#w2dm-friends #w2dm-friends-list .w2dm-find-wrap,
#w2dm-friends #w2dm-friends-list .w2dm-find-results {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove the card borders (keep the soft shadow) */
#w2dm-friends ul.w2dm-cards > li.w2dm-card {
  border: 0 !important;
  box-shadow: var(--w2d-shadow-sm);
}

/* If you want to eliminate the grid overlay entirely on Find cards,
   switch those cards to flex instead of grid */
#w2dm-friends .w2dm-card--find {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Ensure internals still look right when using flex */
#w2dm-friends .w2dm-card--find .w2dm-card__avatar { margin-bottom: 8px; }
#w2dm-friends .w2dm-card--find .w2dm-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

/* Remove any board/box around the results container */
#w2dm-friends .w2dm-find-results,
#w2dm-friends .w2dm-find-results ul.w2dm-cards {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make each card a single layer */
#w2dm-friends ul.w2dm-cards > li.w2dm-card{
  background: #fff !important;
  border: 0 !important;
  box-shadow: var(--w2d-shadow-sm) !important;
  background-clip: padding-box;
}

/* Kill theme rings/frames drawn with pseudo elements */
#w2dm-friends ul.w2dm-cards > li.w2dm-card::before,
#w2dm-friends ul.w2dm-cards > li.w2dm-card::after{
  content: none !important;
  display: none !important;
}

/* If your theme injects an inner "card" wrapper, strip it */
#w2dm-friends li.w2dm-card > .card,
#w2dm-friends li.w2dm-card > .card-inner,
#w2dm-friends li.w2dm-card > .card__inner,
#w2dm-friends li.w2dm-card > [class*="card"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}



/* Scope: DM opened from Friends */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* Keep the cog + close neat, clickable, and consistent */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--w2d-border, #e5e7eb);
  background: var(--w2d-surface, #fff);
  box-shadow: var(--w2d-shadow-sm, 0 4px 14px rgba(2,6,23,.06));
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
}

/* Fix plugins that absolutely-position the close button */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn--close {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: 4px;
}

/* Hover/focus polish */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: var(--w2d-shadow-md, 0 8px 30px rgba(2,6,23,.08));
}
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}

/* Make sure the header lays out like a proper toolbar */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__head,
.w2dm-dm-from-friends .w2dm-dm--friends .dm-head,
.w2dm-dm-from-friends .w2dm-dm--friends [data-dm-head] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Scope: only DMs opened from the Friends UI */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__head {
  position: relative;                 /* give us a containing block */
  padding-right: 92px;                /* room for 2 buttons on the right */
}

/* Size & style both buttons consistently */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--w2d-border, #e5e7eb);
  background: var(--w2d-surface, #fff);
  box-shadow: var(--w2d-shadow-sm, 0 4px 14px rgba(2,6,23,.06));
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
  z-index: 2;                         /* stay above title area */
}

/* Force both to sit INLINE on the right, in a fixed spot */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn--close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
}
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn--menu {
  position: absolute !important;
  top: 8px !important;
  right: 52px !important;             /* 36px + 8px gap */
}

/* Hover/focus polish */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: var(--w2d-shadow-md, 0 8px 30px rgba(2,6,23,.08));
}
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}
/* === DM overlay polish when opened from Friends === */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__head {
  position: relative;                 /* anchor for absolutely placed buttons */
  padding-right: 92px;                /* space for cog + close */
  z-index: 2;
}

/* Unify button sizing/shape and override inline sizes from DM core */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid var(--w2d-border, #e5e7eb) !important;
  background: var(--w2d-surface, #fff) !important;
  box-shadow: var(--w2d-shadow-sm, 0 4px 14px rgba(2,6,23,.06));
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
}

/* Place both buttons inline on the right */
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn--close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
}
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn--menu {
  position: absolute !important;
  top: 8px !important;
  right: 52px !important;             /* 36px + 8px gap */
}

.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: var(--w2d-shadow-md, 0 8px 30px rgba(2,6,23,.08));
}
.w2dm-dm-from-friends .w2dm-dm--friends .w2dm-dm__btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}