.cad-sm-page{
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.10), transparent 24%),
    linear-gradient(180deg, #eef4fb 0%, #f7faff 100%);
  min-height: 100vh;
  padding: 26px 0 42px;
}

.cad-sm-container{
  max-width: var(--pixi-site-shell-max-width, 1380px);
  margin: 0 auto;
  padding: 0 var(--pixi-site-shell-gutter, 20px);
}

.cad-sm-topbar{
  position:sticky;
  top:0;
  z-index:1200;
  background: transparent;
  border-bottom: 0;
}

.cad-sm-topbar__container{
  padding-top:12px;
  padding-bottom:12px;
}

.cad-sm-topbar__card{
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(15,23,42,0.10);
  border-radius:22px;
  box-shadow:0 18px 42px rgba(15,23,42,0.10);
  padding:14px 16px;
}

.cad-sm-topbar__row{
  display:flex;
  align-items:center;
  gap:16px;
}

.cad-sm-topbar__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:260px;
}

.cad-sm-topbar__avatar{
  width:56px;
  height:56px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, #1d4ed8, #38bdf8);
  color:#fff;
  font-size:1.2rem;
  font-weight:900;
  flex:0 0 auto;
  text-decoration:none;
}
.cad-sm-topbar__avatar img{ width:100%; height:100%; object-fit:contain; display:block; }

.cad-sm-topbar__user{ min-width:0; }
.cad-sm-topbar__name{ font-weight:1000; color:#0f172a; font-size:1.05rem; line-height:1.1; }
.cad-sm-topbar__sub{ color:#64748b; font-size:.86rem; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cad-sm-topbar__stats{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  justify-content:center;
  min-width:0;
}

.cad-sm-topbar__stat{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:#f1f5ff;
  border:1px solid rgba(37,99,235,0.14);
  color:#0f172a;
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
}
.cad-sm-topbar__stat:hover{ filter:brightness(0.98); }
.cad-sm-topbar__stat-icon{ opacity:.85; }
.cad-sm-topbar__stat-num{ color:#1d4ed8; }
.cad-sm-topbar__stat-label{ color:#334155; font-weight:900; font-size:.86rem; }

.cad-sm-topbar__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.cad-sm-topbar__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  font-weight:1000;
  text-decoration:none;
  border:1px solid rgba(148,163,184,0.30);
}
.cad-sm-topbar__btn--ghost{
  background:#fff;
  color:#0f172a;
}
.cad-sm-topbar__btn--primary{
  background:linear-gradient(90deg, #2563eb, #3b82f6);
  color:#fff;
  border-color:transparent;
}

.cad-sm-layout{
  display:grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 300px);
  gap: 20px;
  align-items:start;
}

.cad-sm-column{
  min-width: 0;
}

.cad-sm-column--left,
.cad-sm-column--right{
  position: sticky;
  top: 18px;
}

.cad-sm-panel{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(15,23,42,0.08);
  padding: 18px;
}

/* Page spot (adblock-safe naming) */
.cad-sm-side-spot{
  display:block;
  border-radius: 24px;
  overflow:hidden;
  box-shadow: 0 18px 42px rgba(15,23,42,0.10);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.96);
  text-decoration:none;
}
.cad-sm-side-spot:hover{ filter: brightness(1.02); }
.cad-sm-side-spot:active{ transform: translateY(1px); }
.cad-sm-side-spot img{
  width:100%;
  height:auto;
  display:block;
}

.cad-sm-column{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.cad-sm-panel__head{
  margin-bottom: 14px;
}

.cad-sm-panel__head h2{
  margin:0;
  color:#0f172a;
  font-size:1.12rem;
  font-weight:900;
}

.cad-sm-panel__head p{
  margin:6px 0 0;
  color:#64748b;
  font-size:.9rem;
  line-height:1.5;
}

.cad-sm-profile-panel{
  display:grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items:center;
}

.cad-sm-profile-panel__avatar{
  width:72px;
  height:72px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, #1d4ed8, #38bdf8);
  color:#fff;
  font-size:1.45rem;
  font-weight:900;
}

.cad-sm-profile-panel__avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cad-sm-profile-panel__content h1{
  margin:0;
  font-size:1.18rem;
  font-weight:900;
}

.cad-sm-profile-panel__content h1 a{
  color:#0f172a;
  text-decoration:none;
}

.cad-sm-profile-panel__content p{
  margin:6px 0 0;
  color:#64748b;
  font-size:.88rem;
}

.cad-sm-profile-panel__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.cad-sm-profile-panel__meta span,
.cad-sm-profile-panel__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:#eef4ff;
  color:#1d4ed8;
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
}

.cad-sm-profile-panel__link{
  margin-top:10px;
}

.cad-sm-profile-panel__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.cad-sm-profile-panel__actions .cad-sm-profile-panel__link{
  margin-top:0;
}

.cad-sm-profile-panel__link--secondary{
  background:#f8fbff;
  color:#0f172a;
  border:1px solid rgba(148,163,184,0.18);
}

.cad-sm-following-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}

.cad-sm-following-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:54px;
  padding:10px 12px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid rgba(148,163,184,0.18);
  color:#0f172a;
  font-weight:800;
  text-decoration:none;
}

.cad-sm-following-item__avatar{
  position:relative;
  width:38px;
  height:38px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#2563eb;
  color:#fff;
  font-size:.75rem;
  font-weight:900;
}

.cad-sm-following-item__avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cad-sm-following-item__name{
  font-size:.92rem;
  line-height:1.2;
}

.cad-sm-following-item__main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}

.cad-sm-following-item__status{
  color:#64748b;
  font-size:.72rem;
  font-weight:700;
}

.cad-sm-following-item__presence{
  position:absolute;
  right:1px;
  bottom:1px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#0f172a;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(15,23,42,0.08);
}

.cad-sm-following-item__presence.is-online{
  background:#22c55e;
}

.cad-sm-following-item__presence.is-offline{
  background:#0f172a;
}

.cad-sm-following-item__unread{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:.7rem;
  font-weight:900;
  line-height:1;
  flex:0 0 auto;
}

.cad-sm-following-item__unread.is-hidden{
  display:none;
}

.cad-sm-subpanel__title{
  margin:16px 0 6px;
  font-size:0.95rem;
  font-weight:900;
  color:#0f172a;
  letter-spacing:-0.01em;
}

.cad-sm-subpanel__hint{
  margin:0 0 12px;
  color:#64748b;
  font-size:0.8rem;
  line-height:1.45;
}

.cad-sm-message-requests{
  margin-top:4px;
}

.cad-sm-following-item--message-request{
  background:#f5f3ff;
  border-color:#c4b5fd;
}

.cad-sm-following-item__tag{
  display:block;
  font-size:0.65rem;
  font-weight:900;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#6366f1;
  line-height:1.2;
}

.cad-sm-slider-shell{
  position:relative;
}

.cad-sm-slider-arrow{
  display:none;
}

.cad-sm-live-toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147483200;
  display:flex;
  flex-direction:column-reverse;
  gap:10px;
  pointer-events:none;
}

.cad-sm-live-toast{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:240px;
  max-width:320px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(15,23,42,0.96);
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 30px rgba(15,23,42,0.22);
  border:1px solid rgba(255,255,255,0.08);
  pointer-events:auto;
  transition:opacity .22s ease, transform .22s ease;
}

.cad-sm-live-toast strong{
  font-size:.86rem;
  line-height:1.25;
}

.cad-sm-live-toast span{
  color:rgba(255,255,255,0.82);
  font-size:.77rem;
  line-height:1.35;
}

.cad-sm-live-toast.is-hiding{
  opacity:0;
  transform:translateY(8px);
}

.cad-sm-live-toast__actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.cad-sm-live-toast__btn{
  border:none;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.cad-sm-live-toast__btn.is-accept{background:#2563eb;color:#fff}
.cad-sm-live-toast__btn.is-reject{background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.2)}
.cad-sm-live-toast__btn:disabled{opacity:.55;cursor:not-allowed}

.cad-sm-panel--composer,
.cad-sm-panel--feed{
  padding: 20px;
}

.cad-sm-composer{
  margin-bottom: 0;
}

.cad-sm-feed-list,
.cad-sm-ads-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cad-sm-panel--recent-mobile{
  display:none;
}

.cad-sm-feed-ad-inline{
  width:100%;
}

.cad-sm-feed-card{
  border:1px solid rgba(148,163,184,0.18);
  border-radius:24px;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.96));
  box-shadow:0 14px 28px rgba(15,23,42,0.06);
}

.cad-sm-feed-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.cad-sm-feed-card__author{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.cad-sm-feed-card__avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #0f172a, #1d4ed8);
  color:#fff;
  font-weight:900;
  flex:0 0 44px;
}

.cad-sm-feed-card__avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cad-sm-feed-card__author-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.cad-sm-feed-card__author-copy a,
.cad-sm-feed-card__author-copy strong{
  color:#0f172a;
  font-size:.98rem;
  font-weight:900;
  text-decoration:none;
}

.cad-sm-feed-card__author-copy span{
  color:#64748b;
  font-size:.8rem;
  font-weight:700;
}

.cad-sm-feed-card__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:#eef4ff;
  color:#1d4ed8;
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

.cad-sm-feed-card__cta--danger{
  border:0;
  background:#fff1f2;
  color:#be123c;
}

.cad-group-post-delete-form{
  margin:6px 0 0;
}

.cad-sm-feed-card__body{
  margin-bottom:12px;
}

.cad-sm-feed-card__shared{
  margin-top: 12px;
}

.cad-sm-feed-card__media{
  margin-top: 14px;
}

.cad-sm-feed-card__stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,0.16);
  color:#64748b;
  font-size:.82rem;
  font-weight:700;
}

.cad-sm-feed-more{
  margin-top:16px;
  display:flex;
  justify-content:center;
}

.cad-sm-feed-loader{
  margin-top:16px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(239,246,255,0.9);
  color:#1d4ed8;
  font-size:.84rem;
  font-weight:800;
  text-align:center;
  opacity:0;
  transition:opacity .2s ease;
}

.cad-sm-feed-loader.is-visible{
  opacity:1;
}

.cad-sm-feed-sentinel{
  width:100%;
  height:1px;
}

.cad-sm-ad-card{
  display:grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap:12px;
  padding:12px;
  min-height:116px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.96));
  border:1px solid rgba(148,163,184,0.16);
  box-shadow:0 12px 24px rgba(15,23,42,0.06);
}

.cad-sm-ad-card__feed-head{
  display:none;
}

.cad-sm-ad-card__media{
  display:block;
  border-radius:14px;
  overflow:hidden;
  background:#dbe7f7;
  width:92px;
  height:92px;
  min-height:92px;
}

.cad-sm-ad-card__media img{
  width:100%;
  height:100%;
  min-height:92px;
  object-fit:cover;
  display:block;
}

.cad-sm-ad-card__media--empty{
  display:grid;
  place-items:center;
  color:#64748b;
  font-size:.78rem;
  font-weight:800;
}

.cad-sm-ad-card__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

.cad-sm-ad-card__title{
  color:#0f172a;
  font-size:.92rem;
  font-weight:900;
  line-height:1.3;
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.cad-sm-ad-card__author{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  color:#2563eb;
  font-size:.8rem;
  font-weight:800;
  text-decoration:none;
}

.cad-sm-ad-card__author::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#60a5fa;
  flex:0 0 8px;
}

.cad-sm-feed-ad-inline{
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.98));
  border:1px solid rgba(148,163,184,0.18);
  box-shadow:0 14px 28px rgba(15,23,42,0.06);
}

.cad-sm-feed-ad-inline .cad-sm-ad-card__feed-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.cad-sm-ad-card__feed-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cad-sm-ad-card__feed-kicker{
  color:#2563eb;
  font-size:.75rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.cad-sm-ad-card__feed-author{
  color:#0f172a;
  font-size:.98rem;
  font-weight:900;
  text-decoration:none;
}

.cad-sm-ad-card__feed-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:#eef4ff;
  color:#1d4ed8;
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

.cad-sm-feed-ad-inline .cad-sm-ad-card__media{
  width:100%;
  height:260px;
  min-height:260px;
  border-radius:18px;
}

.cad-sm-feed-ad-inline .cad-sm-ad-card__media img{
  min-height:260px;
}

.cad-sm-feed-ad-inline .cad-sm-ad-card__media--empty{
  width:100%;
  min-height:260px;
}

.cad-sm-feed-ad-inline .cad-sm-ad-card__body{
  gap:10px;
}

.cad-sm-feed-ad-inline .cad-sm-ad-card__title{
  font-size:1.04rem;
}

.cad-sm-feed-ad-inline .cad-sm-ad-card__author{
  font-size:.84rem;
}

.cad-sm-empty{
  border:1px dashed rgba(148,163,184,0.28);
  border-radius:18px;
  padding:16px;
  background:#f8fafc;
  color:#64748b;
  font-size:.9rem;
  line-height:1.5;
  text-align:center;
}

.cad-sm-user-modal{
  position:fixed;
  inset:0;
  z-index:2147483500;
  display:none;
}

.cad-sm-user-modal.is-open{
  display:block;
}

.cad-sm-user-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.66);
  backdrop-filter:blur(6px);
}

.cad-sm-user-modal__dialog{
  position:relative;
  z-index:1;
  width:min(960px, calc(100vw - 24px));
  max-height:calc(100vh - 40px);
  margin:20px auto;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg, #071120, #0b1730);
  border:1px solid rgba(96,165,250,0.18);
  box-shadow:0 28px 60px rgba(2,6,23,0.42);
}

.cad-sm-user-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,0.96);
  color:#0f172a;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}

.cad-sm-user-modal__content{
  padding:26px;
}

.cad-sm-user-modal__loading,
.cad-sm-user-modal__error{
  min-height:220px;
  display:grid;
  place-items:center;
  color:#e2e8f0;
  font-size:1rem;
  font-weight:700;
}

.cad-sm-user-modal__shell{
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(0, 1fr);
  gap:18px;
}

.cad-sm-user-modal__profile{
  position:relative;
  overflow:hidden;
  padding:24px 20px 20px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(9,20,43,0.98), rgba(5,12,27,0.98));
  border:1px solid rgba(96,165,250,0.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.cad-sm-user-modal__cover{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:88px;
  background:radial-gradient(circle at center, rgba(34,211,238,0.18), rgba(14,165,233,0.06) 48%, transparent 74%);
}

.cad-sm-user-modal__avatar{
  position:relative;
  z-index:1;
  width:92px;
  height:92px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #1d4ed8, #22d3ee);
  color:#fff;
  font-size:2rem;
  font-weight:900;
  border:3px solid rgba(255,255,255,0.14);
}

.cad-sm-user-modal__avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cad-sm-user-modal__name{
  margin-top:18px;
  color:#f8fafc;
  font-size:1.55rem;
  font-weight:900;
}

.cad-sm-user-modal__subtitle{
  margin-top:4px;
  color:#94a3b8;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cad-sm-user-modal__stats{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:18px;
}

.cad-sm-user-modal__stats div{
  padding:12px 10px;
  border-radius:16px;
  background:rgba(15,23,42,0.54);
  border:1px solid rgba(96,165,250,0.14);
}

.cad-sm-user-modal__stats span{
  display:block;
  color:#94a3b8;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.cad-sm-user-modal__stats strong{
  display:block;
  margin-top:6px;
  color:#f8fafc;
  font-size:1rem;
  font-weight:900;
}

.cad-sm-user-modal__store-btn{
  width:100%;
  margin-top:18px;
  min-height:46px;
  border-radius:16px;
  border:1px solid rgba(96,165,250,0.34);
  color:#e0f2fe;
  background:linear-gradient(180deg, rgba(30,41,59,0.5), rgba(15,23,42,0.78));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
}

.cad-sm-user-chat{
  min-width:0;
  display:flex;
  flex-direction:column;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(9,20,43,0.96), rgba(5,12,27,0.98));
  border:1px solid rgba(96,165,250,0.14);
  padding:18px;
}

.cad-sm-user-chat__head strong{
  color:#f8fafc;
  font-size:1.02rem;
}

.cad-sm-user-chat__head p{
  margin:4px 0 0;
  color:#94a3b8;
  font-size:.86rem;
}

.cad-sm-user-chat__messages{
  min-height:240px;
  max-height:360px;
  margin-top:16px;
  padding:10px;
  border-radius:18px;
  background:rgba(2,6,23,0.34);
  border:1px solid rgba(96,165,250,0.08);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cad-sm-user-chat__empty,
.cad-sm-user-chat__self-note{
  color:#94a3b8;
  font-size:.92rem;
  text-align:center;
  padding:28px 12px;
  border:1px dashed rgba(148,163,184,0.18);
  border-radius:16px;
}

.cad-sm-user-bubble{
  display:flex;
  gap:10px;
  max-width:88%;
}

.cad-sm-user-bubble--outgoing{
  align-self:flex-end;
  flex-direction:row-reverse;
}

.cad-sm-user-bubble__avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#1d4ed8;
  color:#fff;
  font-size:.84rem;
  font-weight:900;
  flex:0 0 34px;
}

.cad-sm-user-bubble__avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cad-sm-user-bubble__body-wrap{
  min-width:0;
}

.cad-sm-user-bubble__meta{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:4px;
  color:#94a3b8;
  font-size:.72rem;
}

.cad-sm-user-bubble__meta strong{
  color:#e2e8f0;
  font-size:.76rem;
}

.cad-sm-user-bubble__body{
  padding:12px 14px;
  border-radius:18px;
  background:rgba(15,23,42,0.86);
  color:#f8fafc;
  font-size:.9rem;
  line-height:1.5;
}

.cad-sm-user-bubble--outgoing .cad-sm-user-bubble__body{
  background:linear-gradient(135deg, #1d4ed8, #2563eb);
}

/* 2026-05-28: WhatsApp-style status under outgoing DM bubbles. */
.cad-sm-user-bubble__status{
  font-size:.7rem;
  margin-top:4px;
  color:rgba(255,255,255,.72);
  align-self:flex-end;
  display:inline-flex;
  align-items:center;
  gap:4px;
  line-height:1.2;
}
.cad-sm-user-bubble--incoming .cad-sm-user-bubble__status{ display:none; }
.cad-sm-user-status--pending{ font-style:italic; opacity:.7; }
.cad-sm-user-status--sent{ color:rgba(255,255,255,.6); }
.cad-sm-user-status--seen{ color:#86efac; font-weight:600; }
.cad-sm-user-status--error{ color:#fecaca; font-weight:600; }
.cad-sm-user-bubble--pending .cad-sm-user-bubble__body{ opacity:.78; }
.cad-sm-user-bubble--error .cad-sm-user-bubble__body{ outline:1px solid #ef4444; }
.cad-sm-user-retry{
  background:rgba(255,255,255,.15);
  color:inherit;
  border:1px solid currentColor;
  border-radius:6px;
  padding:1px 6px;
  font-size:.92em;
  cursor:pointer;
  font-family:inherit;
  line-height:1;
}
.cad-sm-user-retry:hover{ background:rgba(255,255,255,.28); }

.cad-sm-user-chat__composer{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cad-sm-user-chat__composer textarea{
  width:100%;
  min-height:98px;
  border-radius:18px;
  border:1px solid rgba(96,165,250,0.2);
  background:rgba(7,14,28,0.84);
  color:#f8fafc;
  padding:14px;
  resize:vertical;
}

.cad-sm-user-chat__composer button{
  align-self:flex-end;
  min-width:146px;
  min-height:42px;
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg, #2563eb, #3b82f6);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* Attach preview (image/video picked but not sent yet) */
.cad-sm-user-chat__attach-preview{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:rgba(37,99,235,0.12);border:1px solid rgba(96,165,250,0.25);
  border-radius:12px;
}
.cad-sm-user-chat__attach-preview img,.cad-sm-user-chat__attach-preview video{
  max-height:64px;max-width:110px;border-radius:6px;object-fit:cover;
}
.cad-sm-user-chat__attach-remove{
  align-self:center;min-width:0;min-height:0;
  background:#dc2626;color:#fff;border:none;border-radius:50%;
  width:22px;height:22px;font-size:.75em;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cad-sm-user-chat__attach-preview span{font-size:.8em;color:#93c5fd;word-break:break-all}

/* Composer row: attach + mic + textarea + send, all on one line */
.cad-sm-user-chat__composer-row{display:flex;align-items:flex-end;gap:8px;}
.cad-sm-user-chat__composer-row textarea{flex:1;min-height:44px;margin:0;}
.cad-sm-user-chat__composer-row .cad-sm-user-chat__tool-btn{
  align-self:center;min-width:0;min-height:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(96,165,250,0.14);border:1px solid rgba(96,165,250,0.25);
  color:#e2e8f0;font-size:1.1em;cursor:pointer;flex-shrink:0;
}
.cad-sm-user-chat__composer-row .cad-sm-user-chat__tool-btn:hover{background:rgba(96,165,250,0.24);}

/* Voice recording bar (replaces the composer row while recording) */
.cad-sm-user-chat__voice-bar{display:flex;align-items:center;gap:10px;}
.cad-sm-user-chat__composer .cad-sm-user-chat__voice-cancel,
.cad-sm-user-chat__composer .cad-sm-user-chat__voice-send{
  align-self:center;min-width:0;min-height:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;font-size:1.05em;
}
.cad-sm-user-chat__voice-cancel{background:rgba(220,38,38,.15);color:#fca5a5;}
.cad-sm-user-chat__voice-send{background:#22c55e;color:#fff;}
.cad-sm-user-chat__voice-status{
  flex:1;display:flex;align-items:center;gap:8px;
  background:rgba(220,38,38,.12);border-radius:999px;padding:8px 14px;
  font-weight:700;font-size:.88em;color:#fca5a5;
}
.cad-sm-user-chat__voice-dot{
  width:9px;height:9px;border-radius:50%;background:#ef4444;flex-shrink:0;
  animation:gchatVoicePulse 1.1s ease-in-out infinite;
}

/* Media inside DM bubbles */
.cad-sm-user-bubble__media{
  display:block;max-width:220px;max-height:220px;border-radius:12px;
  object-fit:cover;margin-bottom:6px;cursor:pointer;
}
.cad-sm-user-bubble__audio{display:block;width:100%;max-width:230px;height:36px;margin-bottom:6px;}

@media (max-width: 1180px){
  .cad-sm-layout{
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  }
  .cad-sm-column--right{
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 920px){
  .cad-sm-layout{
    grid-template-columns: 1fr;
  }
  .cad-sm-column--left,
  .cad-sm-column--right{
    position: static;
  }
  .cad-sm-topbar__container{
    padding-top:10px;
    padding-bottom:10px;
  }
  .cad-sm-topbar__row{
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .cad-sm-topbar__left{
    min-width:0;
  }
  .cad-sm-topbar__stats{
    justify-content:flex-start;
    width:100%;
    order:3;
    flex-wrap:wrap;
  }
  .cad-sm-user-modal__shell{
    grid-template-columns:1fr;
  }
  .cad-sm-user-chat__messages{
    max-height:280px;
  }
}

@media (max-width: 640px){
  /* Minimal FB-like header on mobile */
  .cad-sm-topbar__container{
    padding-top:8px;
    padding-bottom:8px;
  }
  .cad-sm-topbar__card{
    padding:10px 12px;
    border-radius:18px;
  }
  .cad-sm-topbar__row{
    flex-wrap:nowrap;
  }
  .cad-sm-topbar__left{
    min-width:0;
    flex:1 1 auto;
  }
  .cad-sm-topbar__avatar{
    width:42px;
    height:42px;
    font-size:1rem;
  }
  .cad-sm-topbar__sub{ display:none; }
  .cad-sm-topbar__stats{ display:none; }
  .cad-sm-topbar__actions{ gap:8px; }
  .cad-sm-topbar__btn{
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    font-size:0; /* hide label text */
    border-radius:999px;
  }
  .cad-sm-topbar__btn::before{
    font-size:18px;
    line-height:1;
  }
  .cad-sm-topbar__btn--ghost::before{ content:"🏪"; }
  .cad-sm-topbar__btn--primary::before{ content:"✏️"; }
}

@media (max-width: 980px){
  .cad-sm-slider-shell{
    padding:0 28px;
  }
  .cad-sm-slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:28px;
    height:28px;
    border:0;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,0.88);
    color:#fff;
    font-size:1.15rem;
    line-height:1;
    box-shadow:0 10px 18px rgba(15,23,42,0.18);
  }
  .cad-sm-slider-arrow--prev{
    left:0;
  }
  .cad-sm-slider-arrow--next{
    right:0;
  }
  .cad-sm-following-list{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 8px;
    margin:0 0 14px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cad-sm-following-list::-webkit-scrollbar{
    display:none;
  }
  .cad-sm-following-item{
    min-width:240px;
    scroll-snap-align:start;
  }
  .cad-sm-desktop-only{
    display:none !important;
  }
  .cad-sm-panel--recent-mobile{
    display:block;
  }
  .cad-sm-feed-ad-inline{
    display:block;
    width:100%;
    min-width:0;
    min-height:0;
    padding:0;
    overflow:hidden;
  }
  .cad-sm-feed-ad-inline .cad-sm-ad-card__feed-head{
    padding:14px 14px 0;
  }
  .cad-sm-feed-ad-inline .cad-sm-ad-card__media{
    min-height:200px;
    height:200px;
    border-radius:0;
  }
  .cad-sm-feed-ad-inline .cad-sm-ad-card__media img{
    height:200px;
  }
  .cad-sm-feed-ad-inline .cad-sm-ad-card__media--empty{
    min-height:200px;
    height:200px;
  }
  .cad-sm-feed-ad-inline .cad-sm-ad-card__body{
    position:static;
    color:#0f172a;
    padding:14px 14px 16px;
    background:#fff;
  }
  .cad-sm-feed-ad-inline .cad-sm-ad-card__title{
    color:#0f172a;
    font-size:.96rem;
  }
  .cad-sm-feed-ad-inline .cad-sm-ad-card__author{
    color:#475569;
    font-size:.78rem;
  }
  .cad-sm-feed-ad-inline .cad-sm-ad-card__author::before{
    background:#2563eb;
  }
  .cad-sm-page{
    padding:18px 0 30px;
  }
  .cad-sm-container{
    padding: 0 14px;
  }
  .cad-sm-panel,
  .cad-sm-panel--composer,
  .cad-sm-panel--feed{
    padding:16px;
    border-radius:20px;
  }
  .cad-sm-profile-panel{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .cad-sm-profile-panel__avatar{
    margin:0 auto;
  }
  .cad-sm-profile-panel__meta{
    justify-content:center;
  }
  .cad-sm-feed-card__head{
    flex-direction:column;
    align-items:flex-start;
  }
  .cad-sm-feed-card__stats{
    flex-direction:column;
    align-items:flex-start;
  }
  .cad-sm-ads-list--stories{
    display:flex;
    flex-direction:row;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 8px;
    margin:0;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cad-sm-ads-list--stories::-webkit-scrollbar{
    display:none;
  }
  .cad-sm-ads-list--stories .cad-sm-empty{
    min-width:100%;
    scroll-snap-align:start;
  }
  .cad-sm-ads-list--stories .cad-sm-ad-card{
    position:relative;
    display:block;
    width:126px;
    min-width:126px;
    min-height:178px;
    padding:0;
    border-radius:20px;
    overflow:hidden;
    background:#0f172a;
    border:1px solid rgba(148,163,184,0.18);
    box-shadow:0 14px 26px rgba(15,23,42,0.14);
    scroll-snap-align:start;
  }
  .cad-sm-ads-list--stories .cad-sm-ad-card__media{
    min-height:178px;
    height:178px;
    border-radius:0;
    background:linear-gradient(180deg, rgba(15,23,42,0.08), rgba(15,23,42,0.48));
  }
  .cad-sm-ads-list--stories .cad-sm-ad-card__media img{
    min-height:178px;
    height:178px;
  }
  .cad-sm-ads-list--stories .cad-sm-ad-card__media--empty{
    min-height:178px;
    height:178px;
    background:linear-gradient(135deg, #1d4ed8, #0f172a);
    color:#fff;
  }
  .cad-sm-ads-list--stories .cad-sm-ad-card__body{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    gap:4px;
    padding:28px 10px 10px;
    color:#fff;
    background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,0.88) 42%, rgba(15,23,42,0.96) 100%);
  }
  .cad-sm-ads-list--stories .cad-sm-ad-card__title{
    color:#fff;
    font-size:.82rem;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .cad-sm-ads-list--stories .cad-sm-ad-card__author{
    color:rgba(255,255,255,0.86);
    font-size:.69rem;
  }
  .cad-sm-ads-list--stories .cad-sm-ad-card__author::before{
    background:#bfdbfe;
  }
  .cad-sm-user-modal__dialog{
    width:100vw;
    max-width:100vw;
    height:auto;
    min-height:100dvh;
    max-height:none;
    margin:0;
    border-radius:0;
    border:0;
    overflow:visible;
  }
  .cad-sm-user-modal{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .cad-sm-user-modal__content{
    height:auto;
    min-height:100dvh;
    padding:56px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
    overflow:visible;
  }
  .cad-sm-user-modal__shell{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:calc(100dvh - 66px);
  }
  .cad-sm-user-modal__profile,
  .cad-sm-user-chat{
    border-radius:20px;
  }
  .cad-sm-user-modal__profile{
    padding:16px 14px 14px;
    border-radius:18px;
    flex:0 0 auto;
  }
  .cad-sm-user-modal__cover{
    height:64px;
  }
  .cad-sm-user-modal__avatar{
    width:72px;
    height:72px;
    font-size:1.45rem;
  }
  .cad-sm-user-modal__name{
    margin-top:12px;
    font-size:1.15rem;
  }
  .cad-sm-user-modal__subtitle{
    font-size:.72rem;
  }
  .cad-sm-user-modal__store-btn{
    min-height:42px;
    margin-top:14px;
  }
  .cad-sm-user-chat{
    min-height:0;
    flex:0 0 auto;
    padding:14px;
  }
  .cad-sm-user-modal__stats{
    grid-template-columns:1fr 1fr;
    margin-top:14px;
  }
  .cad-sm-user-chat__messages{
    min-height:220px;
    max-height:40dvh;
    flex:0 0 auto;
  }
  .cad-sm-user-chat__composer{
    position:static;
    margin-top:12px;
    padding-top:0;
    background:none;
  }
  .cad-sm-user-chat__composer textarea{
    min-height:84px;
    max-height:140px;
  }
  .cad-sm-user-chat__composer button{
    width:100%;
    align-self:stretch;
  }
}

.cad-sm-group-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 18px;
}

.cad-sm-group-actions__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,0.14);
  box-shadow:0 12px 26px rgba(15,23,42,0.08);
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.cad-sm-group-actions__btn:hover,
.cad-sm-group-actions__btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(15,23,42,0.12);
}

.cad-sm-group-actions__btn.cad-btn--primary{
  background:linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #60a5fa 100%);
  border-color:rgba(37,99,235,0.22);
  color:#fff;
}

.cad-sm-group-actions__btn.cad-btn--primary:hover,
.cad-sm-group-actions__btn.cad-btn--primary:focus-visible{
  background:linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
}

.cad-sm-group-actions__btn.cad-btn--secondary{
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color:#0f172a;
}

.cad-sm-group-actions__btn.cad-btn--secondary:hover,
.cad-sm-group-actions__btn.cad-btn--secondary:focus-visible{
  border-color:rgba(37,99,235,0.24);
  color:#1d4ed8;
}

.cad-sm-group-card-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cad-sm-group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}

.cad-sm-group-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid rgba(148,163,184,0.18);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 24px rgba(15,23,42,0.08);
}

.cad-sm-group-card__media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  background:linear-gradient(135deg, #1d4ed8, #0f172a);
  color:#fff;
  text-decoration:none;
  overflow:hidden;
}

.cad-sm-group-card__media img{
  width:100%;
  height:120px;
  object-fit:cover;
}

.cad-sm-group-card__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
}

.cad-sm-group-card__title{
  color:#0f172a;
  text-decoration:none;
  font-weight:900;
  line-height:1.3;
}

.cad-sm-group-card__meta{
  color:#64748b;
  font-size:.82rem;
}

.cad-sm-group-card__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px;
}

.cad-sm-group-card__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,0.16);
  background:#eef4ff;
  color:#1d4ed8;
  font-size:.8rem;
  font-weight:800;
  text-decoration:none;
}

.cad-sm-group-card__action--primary{
  background:linear-gradient(90deg, #2563eb, #3b82f6);
  color:#fff;
  border:0;
}

.cad-sm-group-card__action--secondary[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

.cad-sm-overlay-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:12000;
}

.cad-sm-overlay-modal.is-open{
  display:flex;
}

.cad-sm-overlay-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.56);
  backdrop-filter:blur(4px);
}

.cad-sm-overlay-modal__dialog{
  position:relative;
  z-index:1;
  width:min(560px, calc(100vw - 24px));
  max-height:min(90vh, 900px);
  overflow:auto;
  padding:22px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 30px 80px rgba(15,23,42,0.28);
}

.cad-sm-overlay-modal__dialog--wide{
  width:min(980px, calc(100vw - 24px));
}

.cad-sm-overlay-modal__dialog h3{
  margin:0 0 16px;
  color:#0f172a;
  font-size:1.24rem;
  font-weight:900;
}

.cad-sm-overlay-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:#eff6ff;
  color:#0f172a;
  font-size:1.4rem;
  line-height:1;
}

.cad-sm-overlay-modal__field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.cad-sm-overlay-modal__field span{
  color:#334155;
  font-size:.86rem;
  font-weight:800;
}

.cad-sm-overlay-modal__field input,
.cad-sm-overlay-modal__field textarea,
.cad-sm-overlay-modal__field select,
.cad-sm-overlay-modal__search input{
  width:100%;
  border:1px solid rgba(148,163,184,0.24);
  border-radius:16px;
  background:#f8fbff;
  color:#0f172a;
  padding:12px 14px;
}

.cad-sm-overlay-modal__search{
  margin-bottom:16px;
}

.cad-sm-overlay-modal__actions{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}

.cad-sm-overlay-modal__actions .cad-btn{
  min-height:46px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid rgba(37,99,235,0.18);
  background:linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  box-shadow:0 14px 30px rgba(37,99,235,0.18);
  color:#fff;
  font-weight:800;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cad-sm-overlay-modal__actions .cad-btn:hover,
.cad-sm-overlay-modal__actions .cad-btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(37,99,235,0.24);
  filter:saturate(1.05);
}

.cad-sm-people-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cad-sm-people-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(239,246,255,0.65), rgba(255,255,255,1));
}

.cad-sm-people-item__avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #1d4ed8, #38bdf8);
  color:#fff;
  text-decoration:none;
  font-weight:1000;
}
.cad-sm-people-item__avatar img{ width:100%; height:100%; object-fit:contain; display:block; }
.cad-sm-people-item__avatar span{ font-size:1rem; line-height:1; }

.cad-sm-people-item__body{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.cad-sm-people-item__name{
  color:#0f172a;
  text-decoration:none;
  font-weight:1000;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cad-sm-people-item__name:hover{ text-decoration:underline; }

.cad-sm-people-item__btn{
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.35);
  background:#fff;
  color:#0f172a;
  font-weight:1000;
  padding:10px 14px;
  min-height:40px;
}
.cad-sm-people-item__btn.is-on{
  background:#0f172a;
  color:#fff;
  border-color:rgba(15,23,42,0.55);
}
.cad-sm-people-item__btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

@media (max-width: 980px){
  .cad-sm-group-actions{
    flex-direction:column;
  }
  .cad-sm-group-actions__btn{
    width:100%;
  }
}

@media (max-width: 640px){
  .cad-sm-group-grid{
    grid-template-columns:1fr;
  }
  .cad-sm-overlay-modal{
    align-items:flex-end;
  }
  .cad-sm-overlay-modal__dialog,
  .cad-sm-overlay-modal__dialog--wide{
    width:100%;
    max-width:none;
    max-height:92dvh;
    border-radius:22px 22px 0 0;
  }
}

.cad-group-page{
  padding-top:18px;
}

.cad-group-hero{
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:26px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 18px 42px rgba(15,23,42,0.08);
  margin-bottom:18px;
}

.cad-group-hero__cover{
  min-height:240px;
  background:linear-gradient(135deg, #1d4ed8, #0f172a);
  display:flex;
  align-items:center;
  justify-content:center;
}

.cad-group-hero__cover-btn{
  width:100%;
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.cad-group-hero__cover-btn img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:rgba(0,0,0,0.25);
}

.cad-group-hero__cover-placeholder{
  min-height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.2rem;
  font-weight:900;
}

.cad-group-hero__body{
  padding:20px;
}

.cad-group-hero__meta,
.cad-group-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.cad-group-hero__body h1{
  margin:10px 0 12px;
  color:#0f172a;
  font-size:2rem;
  font-weight:900;
}

.cad-group-hero__badge,
.cad-group-hero__joined{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:#eef4ff;
  color:#1d4ed8;
  font-size:.82rem;
  font-weight:800;
}

.cad-group-hero__badge--muted{
  background:#f8fafc;
  color:#334155;
}

.cad-group-hero__joined--admin{
  background:#dbeafe;
  color:#1d4ed8;
}

/* ── Group hero action badges ───────────────────────────────── */
.cad-group-hero__member-badge,
.cad-group-hero__admin-badge,
.cad-group-hero__pending-badge,
.cad-group-hero__locked-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  line-height:1;
}
.cad-group-hero__member-badge{
  background:#dcfce7;
  color:#16a34a;
}
.cad-group-hero__admin-badge{
  background:#dbeafe;
  color:#1d4ed8;
}
.cad-group-hero__pending-badge{
  background:#fef9c3;
  color:#a16207;
}
.cad-group-hero__locked-badge{
  background:#f1f5f9;
  color:#64748b;
}

/* ── Join button ────────────────────────────────────────────── */
.cad-group-join-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 22px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:.88rem;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:background .18s,transform .12s,box-shadow .18s;
  box-shadow:0 2px 8px rgba(37,99,235,.28);
}
.cad-group-join-btn:hover{
  background:#1d4ed8;
  box-shadow:0 4px 14px rgba(37,99,235,.38);
  transform:translateY(-1px);
}
.cad-group-join-btn:active{transform:translateY(0);}

/* ── Invite notice card ─────────────────────────────────────── */
.cad-group-invite-notice{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);
  border:1.5px solid #bfdbfe;
  box-shadow:0 2px 10px rgba(37,99,235,.10);
  flex-wrap:wrap;
}
.cad-group-invite-notice__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#2563eb;
  color:#fff;
  flex-shrink:0;
}
.cad-group-invite-notice__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:120px;
}
.cad-group-invite-notice__text strong{
  font-size:.9rem;
  font-weight:800;
  color:#1e3a8a;
}
.cad-group-invite-notice__text span{
  font-size:.78rem;
  color:#3b82f6;
  font-weight:500;
}
.cad-group-invite-notice__btns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.cad-invite-action-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  border-radius:999px;
  font-size:.83rem;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:background .17s,transform .12s,box-shadow .17s;
  white-space:nowrap;
}
.cad-invite-action-btn--accept{
  background:#16a34a;
  color:#fff;
  box-shadow:0 2px 8px rgba(22,163,74,.28);
}
.cad-invite-action-btn--accept:hover{
  background:#15803d;
  box-shadow:0 4px 14px rgba(22,163,74,.36);
  transform:translateY(-1px);
}
.cad-invite-action-btn--decline{
  background:#fff;
  color:#dc2626;
  border:1.5px solid #fca5a5;
}
.cad-invite-action-btn--decline:hover{
  background:#fef2f2;
  border-color:#ef4444;
  transform:translateY(-1px);
}
.cad-invite-action-btn:active{transform:translateY(0);}

@media(max-width:600px){
  .cad-group-invite-notice{flex-direction:column;align-items:flex-start;gap:10px;}
  .cad-group-invite-notice__btns{width:100%;}
  .cad-invite-action-btn{flex:1;justify-content:center;}
}

.cad-group-hero__owner{
  display:flex;
  align-items:center;
  gap:10px;
  color:#475569;
  margin-bottom:14px;
}

.cad-group-hero__owner a{
  color:#1d4ed8;
  text-decoration:none;
  font-weight:800;
}

.cad-group-hero__owner-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#2563eb;
  color:#fff;
  font-weight:900;
}

.cad-group-hero__owner-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cad-group-hero__owner-sub{
  font-size:.78rem;
  color:#64748b;
}

.cad-group-tabs{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  gap:0;
  margin:0;
  padding:0 8px;
  border-top:1px solid rgba(15,23,42,0.09);
  border-bottom:1px solid rgba(15,23,42,0.09);
  background:#fff;
}
.cad-group-tabs::-webkit-scrollbar{display:none}

.cad-group-tabs a,
.cad-group-tabs__chat-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:52px;
  padding:0 16px;
  border-radius:0;
  background:transparent;
  border:none;
  border-bottom:3px solid transparent;
  color:#64748b;
  text-decoration:none;
  font-weight:800;
  font-size:1rem;
  white-space:nowrap;
  position:relative;
  transition:color .15s,border-color .15s,background .15s;
}
.cad-group-tabs a:hover{
  color:#1d4ed8;
  background:rgba(37,99,235,.05);
}

.cad-group-tabs__action{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  padding:0 4px;
  flex-shrink:0;
}

.cad-group-tabs__share{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 14px;
  border-radius:8px;
  border:1.5px solid rgba(37,99,235,.28);
  background:rgba(37,99,235,.07);
  color:#1d4ed8;
  font-weight:800;
  font-size:.82rem;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s;
}
.cad-group-tabs__share:hover{
  background:#dbeafe;
}

.cad-group-tabs__chat-btn{
  gap:6px;
}
.cad-group-tabs__chat-btn:hover{
  color:#1d4ed8;
  background:rgba(37,99,235,.05);
  border-color:transparent;
}
.cad-group-tabs__chat-btn.is-active{
  color:#1d4ed8;
  border-bottom:3px solid #2563eb;
  background:transparent;
  font-weight:900;
}
.gchat-tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:.7em;
  font-weight:900;
  line-height:1;
  margin-left:2px;
}
.gchat-inline-wrap{
  display:flex;
  flex-direction:column;
  height:520px;
  background:var(--surface,#fff);
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border,#e2e8f0);
}
.gchat-messages{
  flex:1;
  overflow-y:auto;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--surface-alt,#f1f5f9);
}
.gchat-msg{
  display:flex;
  align-items:flex-end;
  gap:8px;
  max-width:72%;
}
.gchat-msg--mine{align-self:flex-end;flex-direction:row-reverse}
.gchat-msg--theirs{align-self:flex-start}
.gchat-avatar{width:32px;height:32px;border-radius:50%;object-fit:contain;flex-shrink:0}
.gchat-avatar--initial{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#64748b;color:#fff;font-weight:700;font-size:.8em;flex-shrink:0}
.gchat-bubble{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:16px;max-width:100%}
.gchat-msg--mine .gchat-bubble{background:#2563eb;color:#fff;border-bottom-right-radius:4px}
.gchat-msg--theirs .gchat-bubble{background:#fff;color:#1e293b;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.gchat-username{font-size:.73em;font-weight:700;color:#1d4ed8;margin-bottom:1px}
.gchat-msg--mine .gchat-username{color:#bfdbfe}
.gchat-body{font-size:.93em;line-height:1.45;word-break:break-word}
.gchat-body .cad-mention-link{font-weight:700;text-decoration:none}
.gchat-msg--mine .gchat-body .cad-mention-link{color:#fff}
.gchat-msg--theirs .gchat-body .cad-mention-link{color:#2563eb}
.gchat-body .cad-mention-link:hover{text-decoration:underline}
.gchat-time{font-size:.7em;opacity:.6;align-self:flex-end;margin-top:1px}
/* 2026-05-28: WhatsApp-style read receipt under own bubbles. */
.gchat-status{font-size:.68em;align-self:flex-end;margin-top:1px;line-height:1.2;opacity:.85;display:inline-flex;align-items:center;gap:4px}
.gchat-msg--mine .gchat-status{color:#dbeafe}
.gchat-msg--theirs .gchat-status{display:none}
.gchat-status--pending{font-style:italic;opacity:.7}
.gchat-status--sent{}
.gchat-status--seen{color:#bbf7d0;font-weight:600}
.gchat-msg--mine .gchat-status--seen{color:#86efac}
.gchat-status--error{color:#fecaca;font-weight:600}
.gchat-msg--pending .gchat-bubble{opacity:.78}
.gchat-msg--error .gchat-bubble{outline:1px solid #ef4444}
.gchat-retry{background:rgba(255,255,255,.15);color:inherit;border:1px solid currentColor;border-radius:6px;padding:1px 6px;font-size:.95em;cursor:pointer;line-height:1;font-family:inherit}
.gchat-retry:hover{background:rgba(255,255,255,.28)}
.gchat-empty{text-align:center;color:#94a3b8;margin:auto;font-size:.92em}
.gchat-footer{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);flex-shrink:0}
.gchat-input{flex:1;resize:none;border:1px solid #cbd5e1;border-radius:10px;padding:8px 12px;font-size:.92em;font-family:inherit;outline:none;line-height:1.4;max-height:100px;min-height:38px}
.gchat-input:focus{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.gchat-send{background:#2563eb;color:#fff;border:none;border-radius:10px;padding:8px 16px;font-size:.92em;font-weight:700;cursor:pointer;flex-shrink:0;transition:background .15s}
.gchat-send:hover{background:#1d4ed8}
.gchat-send:disabled{opacity:.5;cursor:not-allowed}

/* Tools row */
.gchat-tools{display:flex;gap:4px;flex-shrink:0}
.gchat-tool-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;border:1px solid #e2e8f0;
  background:#f8fafc;cursor:pointer;font-size:1.1em;flex-shrink:0;
  transition:background .12s;
}
.gchat-tool-btn:hover{background:#eef4ff}

/* File preview bar */
.gchat-file-preview{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:#f0f9ff;border-top:1px solid #bae6fd;flex-shrink:0;
}
.gchat-file-preview img,.gchat-file-preview video{
  max-height:72px;max-width:120px;border-radius:6px;object-fit:cover;
}
.gchat-file-preview__remove{
  background:#dc2626;color:#fff;border:none;border-radius:50%;
  width:22px;height:22px;font-size:.75em;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
#gChatPreviewName{font-size:.8em;color:#0369a1;word-break:break-all}

/* Emoji picker */
.gchat-emoji-picker{
  position:absolute;bottom:calc(100% + 4px);left:0;
  display:flex;flex-wrap:wrap;gap:2px;
  width:280px;max-height:200px;overflow-y:auto;
  padding:8px;background:#fff;border:1px solid #e2e8f0;
  border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.12);
  z-index:999;
}
#gChat{position:relative}
.gchat-emoji{
  background:none;border:none;font-size:1.3em;cursor:pointer;
  padding:3px;border-radius:6px;line-height:1;transition:background .1s;
}
.gchat-emoji:hover{background:#f1f5f9}

/* Reaction bar (shows on hover desktop / .gchat-show-react mobile) */
.gchat-react-bar{
  display:none;
  position:absolute;
  top:-38px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:4px 8px;
  gap:2px;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  z-index:10;
  white-space:nowrap;
}
.gchat-msg--mine .gchat-react-bar{ right:40px; }
.gchat-msg--theirs .gchat-react-bar{ left:40px; }
.gchat-msg:hover .gchat-react-bar,
.gchat-msg.gchat-show-react .gchat-react-bar{ display:inline-flex; }
.gchat-react-opt{
  background:none;border:none;font-size:1.25em;
  cursor:pointer;padding:2px 3px;border-radius:6px;
  line-height:1;transition:transform .1s;
}
.gchat-react-opt:hover{ transform:scale(1.3); }

/* Reaction badges on bubble */
.gchat-reactions{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;
}
.gchat-reaction{
  display:inline-flex;align-items:center;gap:3px;
  background:#f1f5f9;border:1px solid #e2e8f0;
  border-radius:999px;padding:2px 7px;
  font-size:.82em;cursor:pointer;
  transition:background .12s,border-color .12s;line-height:1.4;
}
.gchat-reaction:hover{ background:#e0e7ff;border-color:#a5b4fc; }
.gchat-reaction--mine{
  background:#dbeafe;border-color:#93c5fd;color:#1d4ed8;
}
.gchat-reaction--mine:hover{ background:#bfdbfe; }
.gchat-reaction span{ font-weight:700;font-size:.85em; }
.gchat-msg{ position:relative; }

/* Media in bubbles */
.gchat-media{
  display:block;max-width:240px;max-height:240px;
  border-radius:10px;object-fit:cover;margin-bottom:4px;cursor:pointer;
}
video.gchat-media{max-width:260px;max-height:200px}
.gchat-audio{display:block;max-width:260px;width:100%;height:36px;margin-bottom:4px}

/* Voice recording bar (replaces the footer row while recording) */
.gchat-voice-bar{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-top:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);flex-shrink:0;
}
.gchat-voice-cancel,.gchat-voice-send{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  font-size:1.05em;transition:opacity .12s;
}
.gchat-voice-cancel{background:rgba(220,38,38,.1);color:#dc2626}
.gchat-voice-cancel:hover{opacity:.8}
.gchat-voice-send{background:#22c55e;color:#fff}
.gchat-voice-send:hover{background:#16a34a}
.gchat-voice-status{
  flex:1;display:flex;align-items:center;gap:8px;
  background:rgba(220,38,38,.08);border-radius:999px;padding:8px 14px;
  font-weight:700;font-size:.9em;color:#dc2626;
}
.gchat-voice-dot{
  width:9px;height:9px;border-radius:50%;background:#dc2626;flex-shrink:0;
  animation:gchatVoicePulse 1.1s ease-in-out infinite;
}
@keyframes gchatVoicePulse{0%,100%{opacity:1}50%{opacity:.25}}

.gchat-msg--highlight .gchat-bubble{
  outline:2px solid #f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.28);
  animation:cad-mention-pulse 1.2s ease-in-out 2;
}
.cad-store-comment.cad-comment-highlight{
  border-radius:12px;
  outline:2px solid #f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.22);
  animation:cad-mention-pulse 1.2s ease-in-out 2;
}
@keyframes cad-mention-pulse{
  0%,100%{outline-color:#f59e0b}
  50%{outline-color:#fbbf24}
}

.cad-checkin-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 4px;
}
.cad-checkin-trigger,
.cad-checkin-gps{
  border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;
  border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:13px;
}
.cad-checkin-trigger:hover,
.cad-checkin-gps:hover{background:#dbeafe}
.cad-checkin-chip{
  display:inline-flex;align-items:center;gap:6px;background:#ecfdf5;border:1px solid #86efac;
  color:#166534;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:700;
}
.cad-checkin-chip.is-hidden{display:none}
.cad-checkin-chip__clear{
  border:0;background:transparent;color:#166534;font-size:18px;line-height:1;cursor:pointer;padding:0 2px;
}
.cad-checkin-panel{
  border:1px solid #e2e8f0;border-radius:12px;padding:10px;background:#f8fafc;margin-bottom:8px;
}
.cad-checkin-panel.is-hidden{display:none}
.cad-checkin-search{
  width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:14px;
}
.cad-checkin-results{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.cad-checkin-result{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  border:1px solid #e2e8f0;border-radius:10px;background:#fff;padding:8px 10px;cursor:pointer;
}
.cad-checkin-result:hover{background:#eff6ff;border-color:#93c5fd}
.cad-checkin-result span{color:#64748b;font-size:12px;line-height:1.35}
.cad-checkin-empty{color:#64748b;font-size:13px;padding:8px 4px}
.cad-checkin-link{
  display:inline-flex;align-items:center;gap:4px;color:#2563eb;font-weight:700;font-size:12px;text-decoration:none;margin-top:2px;
}
.cad-checkin-link:hover{text-decoration:underline}

.cad-post-checkin-block{
  padding:0 16px 10px;
  display:flex;flex-direction:column;gap:4px;
}
.cad-post-with-users{
  color:#0f172a;font-weight:700;font-size:14px;line-height:1.35;
}
.cad-post-with-users a,.cad-with-user-link{
  color:#2563eb;text-decoration:none;font-weight:700;
}
.cad-post-with-users a:hover,.cad-with-user-link:hover{text-decoration:underline}
.cad-with-users-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;
}
.cad-with-users-toolbar.is-hidden{display:none}
.cad-with-users-trigger,.cad-with-users-search{
  border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:8px 12px;font-size:13px;
}
.cad-with-users-trigger{cursor:pointer;background:#f8fafc;font-weight:600}
.cad-with-users-trigger:hover{background:#eff6ff;border-color:#93c5fd}
.cad-with-users-chips{display:flex;flex-wrap:wrap;gap:6px}
.cad-with-chip{
  display:inline-flex;align-items:center;gap:4px;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:999px;padding:4px 8px 4px 10px;font-size:12px;font-weight:600;color:#1e40af;
}
.cad-with-chip__clear{
  border:none;background:transparent;color:#64748b;cursor:pointer;font-size:16px;line-height:1;padding:0 2px;
}
.cad-with-users-panel{
  margin-top:8px;border:1px solid #e2e8f0;border-radius:12px;padding:10px;background:#fff;
}
.cad-with-users-panel.is-hidden{display:none}
.cad-with-users-search{width:100%;margin-bottom:8px}
.cad-with-users-results{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.cad-with-result{
  display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;
  border:1px solid #e2e8f0;border-radius:10px;padding:10px;background:#fff;cursor:pointer;
}
.cad-with-result:hover,.cad-with-result.is-picked{background:#eff6ff;border-color:#93c5fd}
.cad-with-empty{color:#64748b;font-size:13px;padding:8px 4px}

@media(max-width:600px){
  .gchat-inline-wrap{height:420px}
  .gchat-msg{max-width:88%}
  .gchat-media{max-width:180px}
  .gchat-emoji-picker{width:240px}
}

.cad-group-tabs a.is-active{
  color:#1d4ed8;
  border-bottom:3px solid #2563eb;
  background:transparent;
  font-weight:900;
}

.cad-group-grid-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr);
  gap:18px;
}

.cad-group-copy{
  color:#334155;
  line-height:1.7;
}

.cad-group-member-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cad-group-member-card,
.cad-group-review-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(148,163,184,0.16);
  border-radius:18px;
  background:#f8fbff;
}

.cad-group-member-card__avatar{
  width:48px;
  height:48px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#2563eb;
  color:#fff;
  font-weight:900;
  text-decoration:none;
}

.cad-group-member-card__avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cad-group-member-card__body{
  min-width:0;
  flex:1 1 auto;
}

.cad-group-member-card__name{
  color:#0f172a;
  text-decoration:none;
  font-weight:900;
}

.cad-group-member-card__meta{
  color:#64748b;
  font-size:.78rem;
}

.cad-group-review-card{
  flex-direction:column;
  align-items:stretch;
}

.cad-group-review-card__actions,
.cad-group-invite-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cad-group-inline-action{
  margin-left:auto;
}

.cad-group-inline-action__danger{
  border-color:rgba(244,63,94,0.18);
  background:#fff1f2;
  color:#be123c;
}

.cad-group-manager-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(148,163,184,0.18);
}

.cad-group-manager-block--wide{
  grid-column:1 / -1;
}

.cad-group-manager-block h3{
  margin:0 0 10px;
  color:#0f172a;
  font-size:1rem;
}

.cad-group-invite-form input,
.cad-group-invite-form select{
  flex:1 1 180px;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(148,163,184,0.24);
  border-radius:14px;
  background:#fff;
}

.cad-group-settings-form{
  display:flex;
  flex-direction:column;
}

.cad-group-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.cad-group-form-note{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:.82rem;
}

.cad-group-invite-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

.cad-group-invite-list__item{
  padding:10px 12px;
  border-radius:14px;
  background:#f8fafc;
  color:#475569;
}

.cad-group-events-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cad-group-event-card{
  overflow:hidden;
  border:1px solid rgba(148,163,184,0.18);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,0.06);
}

.cad-group-event-card__cover{
  height:180px;
  background:linear-gradient(135deg, #1d4ed8, #0f172a);
}

.cad-group-event-card__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.cad-group-event-card__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
}

.cad-group-event-card__meta{
  color:#2563eb;
  font-size:.82rem;
  font-weight:800;
}

.cad-group-event-card__body h3{
  margin:0;
  color:#0f172a;
  font-size:1.08rem;
}

@media (max-width: 980px){
  .cad-group-grid-layout{
    grid-template-columns:1fr;
  }

  .cad-group-form-grid{
    grid-template-columns:1fr;
  }
}

/* ── Invite Panel ─────────────────────────────────────────── */
.cad-invite-panel{
  margin-top:20px;
  border-radius:18px;
  border:1px solid rgba(37,99,235,.14);
  background:linear-gradient(160deg,#f0f7ff 0%,#fff 100%);
  overflow:hidden;
}
.cad-invite-panel__head{
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(37,99,235,.1);
}
.cad-invite-panel__title-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.cad-invite-panel__icon{
  font-size:1.6rem;
  line-height:1;
  flex-shrink:0;
  margin-top:2px;
}
.cad-invite-panel__title{
  margin:0 0 3px;
  font-size:1rem;
  font-weight:900;
  color:#0f172a;
}
.cad-invite-panel__subtitle{
  margin:0;
  font-size:.82rem;
  color:#64748b;
  line-height:1.4;
}
.cad-invite-form{
  padding:0 20px 20px;
}
.cad-invite-search-wrap{
  position:relative;
  margin:16px 0 10px;
}
.cad-invite-search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:.9rem;
  pointer-events:none;
}
.cad-invite-search{
  width:100%;
  box-sizing:border-box;
  height:42px;
  padding:0 14px 0 38px;
  border-radius:12px;
  border:1.5px solid rgba(148,163,184,.3);
  background:#fff;
  font-size:.9rem;
  color:#0f172a;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.cad-invite-search:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.cad-invite-select-all-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(37,99,235,.06);
  margin-bottom:8px;
}
.cad-invite-select-all-label{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:.88rem;
  font-weight:700;
  color:#1e40af;
  user-select:none;
}
.cad-invite-total{
  color:#64748b;
  font-weight:600;
}
.cad-invite-checkbox{
  width:20px;
  height:20px;
  border-radius:6px;
  border:2px solid rgba(37,99,235,.4);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .12s,border-color .12s;
  cursor:pointer;
}
.cad-invite-checkbox.is-checked{
  background:#2563eb;
  border-color:#2563eb;
}
.cad-invite-checkbox.is-checked::after{
  content:'✓';
  color:#fff;
  font-size:.75rem;
  font-weight:900;
}
.cad-invite-checkbox.is-indeterminate{
  background:#93c5fd;
  border-color:#2563eb;
}
.cad-invite-checkbox.is-indeterminate::after{
  content:'—';
  color:#fff;
  font-size:.7rem;
  font-weight:900;
}
.cad-invite-selected-count{
  font-size:.8rem;
  font-weight:700;
  color:#2563eb;
}
.cad-invite-list{
  max-height:320px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(37,99,235,.2) transparent;
}
.cad-invite-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:12px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .12s,border-color .12s;
  user-select:none;
}
.cad-invite-item:hover{
  background:rgba(37,99,235,.05);
}
.cad-invite-item.is-selected{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.22);
}
.cad-invite-item__cb{
  display:none;
}
.cad-invite-item__avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:.88rem;
  flex-shrink:0;
  overflow:hidden;
}
.cad-invite-item__avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.cad-invite-item__name{
  flex:1;
  font-size:.88rem;
  font-weight:700;
  color:#1e293b;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.cad-invite-item__id{
  font-size:.75rem;
  font-weight:600;
  color:#94a3b8;
}
.cad-invite-item__check{
  width:20px;
  height:20px;
  border-radius:6px;
  border:2px solid rgba(148,163,184,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  color:transparent;
  flex-shrink:0;
  transition:background .12s,border-color .12s,color .12s;
}
.cad-invite-item.is-selected .cad-invite-item__check{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}
.cad-invite-panel__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.15);
  flex-wrap:wrap;
}
.cad-invite-footer-count{
  font-size:.83rem;
  font-weight:700;
  color:#64748b;
}
.cad-invite-submit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:40px;
  padding:0 20px;
  border-radius:10px;
  background:linear-gradient(90deg,#2563eb,#3b82f6);
  color:#fff;
  font-weight:900;
  font-size:.88rem;
  border:none;
  cursor:pointer;
  transition:opacity .15s,transform .1s;
  box-shadow:0 6px 16px rgba(37,99,235,.28);
}
.cad-invite-submit:hover:not(:disabled){
  opacity:.92;
}
.cad-invite-submit:active:not(:disabled){
  transform:translateY(1px);
}
.cad-invite-submit:disabled{
  background:#cbd5e1;
  box-shadow:none;
  cursor:not-allowed;
}
.cad-invite-empty{
  padding:20px;
  font-size:.88rem;
  color:#64748b;
  text-align:center;
}
.cad-invite-pending{
  margin:16px 20px 20px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(245,158,11,.07);
  border:1px solid rgba(245,158,11,.2);
}
.cad-invite-pending__title{
  font-size:.82rem;
  font-weight:800;
  color:#92400e;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.cad-invite-pending__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#f59e0b;
  color:#fff;
  font-size:.7rem;
  font-weight:900;
}
.cad-invite-pending__list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cad-invite-pending__item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.83rem;
  color:#78350f;
  font-weight:600;
}
.cad-invite-pending__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f59e0b;
  flex-shrink:0;
}
/* ── End Invite Panel ─────────────────────────────────────── */

@media (max-width: 640px){
  .cad-group-hero__cover,
  .cad-group-hero__cover-btn,
  .cad-group-hero__cover-placeholder{
    min-height:180px;
    height:180px;
  }
  .cad-group-hero__body h1{
    font-size:1.45rem;
  }
  .cad-group-tabs a,
  .cad-group-tabs__chat-btn{
    padding:0 12px;
    font-size:.92rem;
    min-height:46px;
  }
  .cad-group-tabs__share{
    font-size:.78rem;
    padding:0 10px;
  }
}

/* ============================================================
   Post body media embeds (YouTube, Vimeo, Facebook, TikTok,
   Instagram). Rendered server-side by cad_render_post_body_html()
   inside .cad-store-timeline-item__body and shared post bodies.
   ============================================================ */
.cad-post-embeds{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cad-post-embed{
  display:block;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#0f172a;
  color:#f8fafc;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
  transition:transform .15s ease,box-shadow .15s ease;
}
.cad-post-embed:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.14);
}
.cad-post-embed--video{
  background:#000;
}
.cad-post-embed__frame{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
  background:#000;
}
.cad-post-embed__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/* TikTok video is portrait (9:16). We use a much taller padding-bottom so the
   iframe shows the full vertical clip without scrolling. Capped at 720px on
   wide screens via max-height so the card never dominates the feed. */
.cad-post-embed__frame--vertical{
  padding-bottom:160%;
  max-height:720px;
  margin:0 auto;
  max-width:420px;
}
/* Facebook plugin returns a self-sized post (variable height). We swap the
   16:9 padding hack for a fixed comfortable height that fits a single photo
   plus caption — the iframe itself fills it. */
.cad-post-embed__frame--auto{
  padding-bottom:0;
  height:560px;
  background:#fff;
}
.cad-post-embed--card{
  background:#fff;
  color:#0f172a;
}
.cad-post-embed--card .cad-post-embed__open{
  color:#1877f2;
}
.cad-post-embed__open{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:8px 12px 10px;
  font-size:.82rem;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  opacity:.85;
}
.cad-post-embed__open:hover{
  opacity:1;
  text-decoration:underline;
}
.cad-post-embed--link{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  color:#0f172a;
}
.cad-post-embed--link:hover{
  background:#f8fafc;
}
.cad-post-embed__icon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:#fff;
  background:#0f172a;
}
.cad-post-embed--facebook .cad-post-embed__icon{ background:#1877f2; }
.cad-post-embed--tiktok .cad-post-embed__icon{ background:#000; }
.cad-post-embed--instagram .cad-post-embed__icon{
  background:linear-gradient(135deg,#f58529 0%,#dd2a7b 45%,#8134af 75%,#515bd4 100%);
}
.cad-post-embed--vimeo .cad-post-embed__icon{ background:#1ab7ea; }
.cad-post-embed--youtube .cad-post-embed__icon{ background:#ff0000; }
.cad-post-embed__icon svg{
  width:24px;
  height:24px;
  display:block;
}
.cad-post-embed__meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}
.cad-post-embed__platform{
  font-size:.95rem;
  font-weight:700;
  line-height:1.2;
  color:#0f172a;
}
.cad-post-embed__url{
  font-size:.82rem;
  color:#475569;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.cad-post-embed__cta{
  font-size:.78rem;
  font-weight:600;
  color:#2563eb;
  margin-top:2px;
}

/* Dark theme support: detect via existing site var hooks if any.
   We fall back to color-scheme media query so the cards stay readable
   on dark mode browsers without requiring a body class. */
@media (prefers-color-scheme: dark){
  .cad-post-embed--link{
    background:#1e293b;
    border-color:rgba(255,255,255,.08);
    color:#e2e8f0;
  }
  .cad-post-embed--link:hover{
    background:#273449;
  }
  .cad-post-embed__platform{ color:#f8fafc; }
  .cad-post-embed__url{ color:#cbd5f5; }
  .cad-post-embed__cta{ color:#60a5fa; }
}

/* Mobile tweaks: keep the link card readable, keep 16:9 video. */
@media (max-width: 540px){
  .cad-post-embed--link{
    padding:12px 14px;
    gap:10px;
  }
  .cad-post-embed__icon{
    flex-basis:38px;
    width:38px;
    height:38px;
    border-radius:10px;
  }
  .cad-post-embed__icon svg{ width:20px; height:20px; }
  .cad-post-embed__platform{ font-size:.9rem; }
  .cad-post-embed__url{ font-size:.78rem; }
}

/* ============================================================
   Composer live preview (data-role="composer-preview"). Mirrors
   the rendered post body underneath the textarea so the user
   sees exactly what will be published (links go blue, embeds
   appear, URLs that produce embeds disappear from the text).
   ============================================================ */
.cad-sm-composer__preview{
  margin:6px 0 4px;
  padding:12px 14px;
  border:1px dashed rgba(15,23,42,.16);
  border-radius:12px;
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cad-sm-composer__preview[hidden]{ display:none; }
.cad-sm-composer__preview-label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#64748b;
}
.cad-sm-composer__preview-body{
  font-size:.95rem;
  line-height:1.5;
  color:#0f172a;
  word-break:break-word;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cad-sm-composer__preview-body .cad-post-link{
  color:#2563eb;
  text-decoration:underline;
}
.cad-sm-composer__preview-body .cad-post-link:hover{ color:#1d4ed8; }
.cad-sm-composer__preview-body .cad-post-embeds{
  margin-top:0;
}

/* Live preview link cards do not have inline SVG (we only inject
   classes from JS) — use a small background-color block so they
   still look on-brand. */
.cad-sm-composer__preview-body .cad-post-embed__icon{
  background-image:none !important;
}

@media (prefers-color-scheme: dark){
  .cad-sm-composer__preview{
    background:#0f172a;
    border-color:rgba(255,255,255,.12);
  }
  .cad-sm-composer__preview-label{ color:#94a3b8; }
  .cad-sm-composer__preview-body{ color:#e2e8f0; }
  .cad-sm-composer__preview-body .cad-post-link{ color:#60a5fa; }
}

/* Make sure pasted URLs in the actual textarea look like normal
   text — the textarea cannot host inline HTML, but on focus the
   user can clearly see them while the preview shows the styled
   version. */
[data-role="composer-textarea"]{
  word-break:break-word;
}

/* ============================================================
   When a post has no uploaded media but its body contains rich
   link embeds (YouTube / Vimeo / Facebook / TikTok / Instagram)
   the modal promotes the embed to the LEFT media column. These
   overrides make the iframe / link card fill the column nicely
   instead of looking like a cramped sidebar card.
   ============================================================ */
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:14px;
  background:transparent;
}
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed{
  margin:0;
  width:100%;
  max-width:none;
  border-radius:0;
  border:none;
  box-shadow:none;
  background:transparent;
}
/* Video embeds fill the column and stay 16:9 responsive. */
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed--video{
  display:flex;
  flex-direction:column;
}
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed--video .cad-post-embed__frame{
  flex:1 1 auto;
  width:100%;
  border-radius:0;
}
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed--video .cad-post-embed__frame iframe{
  border-radius:0;
}
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed__open{
  margin:0;
  padding:10px 16px;
  text-align:center;
  background:rgba(0,0,0,.55);
  color:#fff;
  border-radius:0;
  font-size:.85rem;
}
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed__open:hover{
  background:rgba(0,0,0,.7);
}

/* Link cards (Facebook / TikTok / Instagram) centred in the column. */
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed--link{
  align-self:center;
  max-width:520px;
  width:90%;
  padding:18px 20px;
  background:#0f172a;
  color:#fff;
  border-radius:12px;
}
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed--link .cad-post-embed__platform,
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed--link .cad-post-embed__cta{
  color:#fff;
}
.cad-post-modal__media-col .cad-post-embeds.cad-post-embeds--modal-media .cad-post-embed--link .cad-post-embed__url{
  color:rgba(255,255,255,.75);
}

/* ============================================================
   Friendship buttons (added 2026-05-26)
   Three contexts:
     1. Full-width on the store/profile page (cad-store-friend-*)
     2. Compact icon in the AxaWorld people list (cad-sm-people-item__friend-btn)
     3. Chat-modal gate when DM is locked behind friendship
   ============================================================ */

/* --- 1. Profile / store page friendship CSS lives in classified-ads-store.css,
       which is the stylesheet store.php loads. classified-ads-sm.css only ships
       compact variants (people list + chat gate) for AxaWorld. */

/* --- 2. Compact icon button in people/following list cards --- */
.cad-sm-people-item__friend-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; margin-right:6px;
  border:1px solid #e2e8f0; background:#ffffff; color:#0f172a;
  border-radius:10px; font-size:1rem; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.cad-sm-people-item__friend-btn:hover:not(:disabled){ background:#f1f5f9; border-color:#cbd5e1; }
.cad-sm-people-item__friend-btn.is-accepted{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.cad-sm-people-item__friend-btn.is-pending{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
.cad-sm-people-item__friend-btn.is-incoming{ background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.cad-sm-people-item__friend-btn.is-cooldown,
.cad-sm-people-item__friend-btn.is-blocked{ opacity:.6; cursor:not-allowed; }

@media (max-width: 480px){
  .cad-sm-people-item__friend-btn{ width:32px; height:32px; }
}

/* --- 3. Chat-modal gate when the viewer can't yet send messages --- */
.cad-sm-user-chat__gate{
  display:flex; flex-direction:column; gap:10px;
  padding:14px 16px; margin:0;
  background:#f8fafc; border-top:1px solid #e2e8f0;
}
.cad-sm-user-chat__gate-text{
  margin:0; font-size:.88rem; line-height:1.45; color:#334155;
}
.cad-sm-user-chat__gate-btn{
  align-self:flex-start;
  padding:8px 14px; font-size:.85rem; font-weight:600;
  background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;
  border:none; border-radius:8px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.cad-sm-user-chat__gate-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(37, 99, 235, .25);
}
.cad-sm-user-chat__gate-btn:disabled{ opacity:.6; cursor:not-allowed; }

@media (max-width: 480px){
  .cad-sm-user-chat__gate-btn{ width:100%; align-self:stretch; text-align:center; }
}

@media (prefers-color-scheme: dark){
  .cad-sm-people-item__friend-btn{ background:#1e293b; color:#e2e8f0; border-color:#334155; }
  .cad-sm-people-item__friend-btn:hover:not(:disabled){ background:#334155; }
  .cad-sm-people-item__friend-btn.is-accepted{ background:#064e3b; color:#86efac; border-color:#065f46; }
  .cad-sm-people-item__friend-btn.is-pending{ background:#78350f; color:#fde68a; border-color:#92400e; }
  .cad-sm-people-item__friend-btn.is-incoming{ background:#1e3a8a; color:#bfdbfe; border-color:#1e40af; }
  .cad-sm-user-chat__gate{ background:#0f172a; border-top-color:#1e293b; }
  .cad-sm-user-chat__gate-text{ color:#cbd5e1; }
}

.cad-mention-link{
  color:#2563eb;
  font-weight:800;
  text-decoration:none;
}
.cad-mention-link:hover{ text-decoration:underline; }
.cad-mention-link--bulk{
  cursor:default;
}
.cad-mention-link--bulk:hover{
  text-decoration:none;
}
.cad-mention-dropdown{
  position:fixed;
  z-index:12050;
  max-height:240px;
  overflow:auto;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(15,23,42,.16);
  padding:6px;
}
.cad-mention-dropdown__item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  color:#0f172a;
}
.cad-mention-dropdown__item:hover,
.cad-mention-dropdown__item:focus{
  background:#eff6ff;
  outline:none;
}
.cad-mention-dropdown__avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:contain;
  flex:0 0 32px;
}
.cad-mention-dropdown__avatar--empty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e2e8f0;
  color:#475569;
  font-weight:700;
}
.cad-mention-dropdown__label{
  font-size:14px;
  line-height:1.3;
}
@media (prefers-color-scheme: dark){
  .cad-mention-link{ color:#60a5fa; }
  .cad-mention-dropdown{ background:#0f172a; border-color:#334155; }
  .cad-mention-dropdown__item{ color:#e2e8f0; }
  .cad-mention-dropdown__item:hover,
  .cad-mention-dropdown__item:focus{ background:#1e293b; }
  .cad-mention-dropdown__avatar--empty{ background:#334155; color:#cbd5e1; }
}