/* Community tab: feed + friends. Uses the dashboard glass tokens (--g-*) with fallbacks to the base tokens. */
#socBox { --sc-ink: var(--g-ink, var(--text-primary, #0f1f2e)); --sc-sub: var(--g-sub, var(--text-secondary, #475569)); --sc-mute: var(--g-mute, var(--text-tertiary, #7b8a9c));
  --sc-line: var(--g-line, rgba(15,31,46,.1)); --sc-card: var(--g-card-hi, rgba(255,255,255,.8)); --sc-acc: var(--g-accent, #4f46e5); --sc-soft: var(--g-accent-soft, rgba(79,70,229,.12)); }

.sc-seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--sc-soft); margin-bottom: 1rem; }
.sc-seg button { border: 0; background: transparent; color: var(--sc-sub); font-weight: 700; font-size: .9rem; font-family: inherit; padding: .45rem 1.1rem; border-radius: 999px; cursor: pointer; }
.sc-seg button.on { background: var(--sc-acc); color: #fff; }
.sc-dot { font-style: normal; background: #e5484d; color: #fff; border-radius: 999px; padding: 0 .4rem; font-size: .72rem; margin-left: .25rem; }

.sc-card { border: 1px solid var(--sc-line); background: var(--sc-card); border-radius: 16px; padding: 1rem; margin-bottom: .9rem; color: var(--sc-ink); }
.sc-locked { text-align: center; padding: 1.4rem 1rem; }

.sc-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
  background: var(--g-brand, linear-gradient(135deg, #7c3aed, #0ea5e9)); background-size: cover; background-position: center; }
.sc-av.sm { width: 32px; height: 32px; font-size: .85rem; }
.sc-av.has-img { color: transparent; }

.sc-compose-row { display: flex; gap: .7rem; align-items: flex-start; }
.sc-compose textarea { flex: 1; resize: vertical; min-height: 76px; }
.sc-compose-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }
.sc-batch { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 200px; font-size: .85rem; color: var(--sc-sub); }
.sc-batch select { flex: 1; min-width: 0; }
.sc-imgwrap { position: relative; margin-top: .6rem; display: inline-block; max-width: 100%; }
.sc-imgwrap img { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; }
.sc-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }

.sc-filters { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0 0 .9rem; }
.sc-filters select { min-width: 180px; max-width: 100%; }
.sc-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--sc-sub); }

.sc-ph { display: flex; align-items: center; gap: .7rem; }
.sc-pmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sc-you { font-size: .68rem; font-weight: 700; color: var(--sc-acc); background: var(--sc-soft); border-radius: 999px; padding: .05rem .45rem; margin-left: .2rem; }
.sc-bchip { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--sc-acc); background: var(--sc-soft); border-radius: 999px; padding: .08rem .55rem; }
.sc-ico { border: 0; background: transparent; cursor: pointer; font-size: 1rem; opacity: .6; }
.sc-ico:hover { opacity: 1; }
.sc-pbody { margin: .75rem 0 .4rem; line-height: 1.6; overflow-wrap: anywhere; }
.sc-pbody a { color: var(--sc-acc); }
.sc-pimg { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: 12px; margin-top: .5rem; background: rgba(0,0,0,.04); }
.sc-counts { display: flex; justify-content: space-between; margin: .6rem 0 .3rem; min-height: 1.1rem; }
.sc-link { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; font-family: inherit; font-size: inherit; }
.sc-link:hover { text-decoration: underline; }
.sc-actions { display: flex; gap: .4rem; border-top: 1px solid var(--sc-line); padding-top: .4rem; }
.sc-act { flex: 1; border: 0; background: transparent; color: var(--sc-sub); font-weight: 700; font-size: .9rem; font-family: inherit; padding: .5rem; border-radius: 10px; cursor: pointer; }
.sc-act:hover { background: var(--sc-soft); }
.sc-act.on { color: var(--sc-acc); }

.sc-cbox { margin-top: .6rem; border-top: 1px solid var(--sc-line); padding-top: .7rem; }
.sc-clist { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; }
.sc-c { display: flex; gap: .5rem; align-items: flex-start; }
.sc-cb { min-width: 0; }
.sc-cbub { background: var(--sc-soft); border-radius: 14px; padding: .45rem .8rem; font-size: .92rem; overflow-wrap: anywhere; }
.sc-cform { display: flex; gap: .5rem; }
.sc-cform input { flex: 1; min-width: 0; }

.sc-h { margin: 1.2rem 0 .5rem; font-size: 1rem; }
.sc-search { display: flex; gap: .5rem; }
.sc-search input { flex: 1; min-width: 0; }
.sc-plist { display: flex; flex-direction: column; gap: .5rem; }
.sc-person { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 1px solid var(--sc-line); border-radius: 14px; background: var(--sc-card); flex-wrap: wrap; }
.sc-pinfo { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.sc-pact { display: flex; gap: .4rem; flex-wrap: wrap; }
.sc-pact .btn { padding: .4rem .8rem; font-size: .85rem; }

@media (max-width: 560px) {
  .sc-card { padding: .8rem; border-radius: 14px; }
  .sc-batch { min-width: 100%; }
  .sc-compose-bar .btn { flex: 1; }
  .sc-pact { width: 100%; }
}

/* messages + calls */
.sc-conv { width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit; position: relative; flex-wrap: nowrap; }
.sc-conv:hover { background: var(--sc-soft); }
.sc-prev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sc-conv .sc-pinfo { min-width: 0; }
.sc-dotline { position: absolute; left: 44px; top: 42px; width: 11px; height: 11px; border-radius: 50%; background: #94a3b8; border: 2px solid var(--sc-card); }
.sc-dotline.on { background: #22c55e; }
.sc-thread { display: flex; flex-direction: column; border: 1px solid var(--sc-line); border-radius: 16px; background: var(--sc-card); overflow: hidden; }
.sc-th { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-bottom: 1px solid var(--sc-line); }
.sc-th .sc-pinfo { flex: 1; min-width: 0; }
.sc-th .btn { padding: .4rem .7rem; }
.sc-msgs { display: flex; flex-direction: column; gap: .4rem; height: min(56vh, 480px); overflow-y: auto; padding: .8rem; }
.sc-m { display: flex; flex-direction: column; max-width: 78%; }
.sc-m.me { align-self: flex-end; align-items: flex-end; }
.sc-m.them { align-self: flex-start; }
.sc-mb { padding: .5rem .85rem; border-radius: 16px; line-height: 1.45; overflow-wrap: anywhere; background: var(--sc-soft); color: var(--sc-ink); }
.sc-m.me .sc-mb { background: var(--sc-acc); color: #fff; }
.sc-m.me .sc-mb a { color: #fff; }
.sc-sys { align-self: center; font-size: .82rem; color: var(--sc-sub); background: var(--sc-soft); border-radius: 999px; padding: .25rem .8rem; }
.sc-mform { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--sc-line); align-items: flex-end; }
.sc-mform textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; }

/* who-said-what: my messages on the right (accent colour), theirs on the left with their photo */
.sc-mrow { display: flex; align-items: flex-end; gap: .45rem; }
.sc-mrow.me { justify-content: flex-end; }
.sc-mrow.them { justify-content: flex-start; }
.sc-mrow .sc-av.sm { width: 30px; height: 30px; font-size: .8rem; }
.sc-m { max-width: min(78%, 420px); }
.sc-m.them .sc-mb { background: var(--sc-card); border: 1px solid var(--sc-line); border-bottom-left-radius: 5px; }
.sc-m.me .sc-mb { border-bottom-right-radius: 5px; background: linear-gradient(135deg, #6d5dfc, #4f46e5); }
.sc-m > span { margin-top: 2px; }
.sc-day { text-align: center; margin: .5rem 0 .2rem; }
.sc-day span { font-size: .72rem; font-weight: 700; color: var(--sc-sub); background: var(--sc-soft); border-radius: 999px; padding: .15rem .7rem; }
.sc-sys { display: inline-flex; align-items: center; gap: .35rem; }
.sc-svg { flex: none; display: block; }

/* call buttons */
.sc-callbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; transition: transform .15s, box-shadow .15s; }
.sc-callbtn:hover { transform: translateY(-1px) scale(1.05); }
.sc-callbtn.voice { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 6px 14px rgba(5,150,105,.35); }
.sc-callbtn.video { background: linear-gradient(135deg, #60a5fa, #4f46e5); box-shadow: 0 6px 14px rgba(79,70,229,.35); }

/* composer tools */
.sc-tool { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--sc-soft); color: var(--sc-acc); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sc-tool:hover { filter: brightness(.95); }
.sc-tool.send { background: var(--sc-acc); color: #fff; }
.sc-tool:disabled { opacity: .5; cursor: default; }
.sc-mform .input { border-radius: 20px; }
.sc-attach { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-top: 1px solid var(--sc-line); }
.sc-attach img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
.sc-rec { display: flex; align-items: center; gap: .6rem; padding: .7rem; border-top: 1px solid var(--sc-line); }
.sc-recdot { width: 12px; height: 12px; border-radius: 50%; background: #e5484d; animation: scBlink 1s infinite; }
@keyframes scBlink { 50% { opacity: .25; } }
.sc-rec.hidden, .sc-mform.hidden, .sc-attach.hidden { display: none; }

/* photo + voice bubbles */
.sc-mb.media { padding: 4px; }
.sc-mimg { display: block; max-width: min(260px, 100%); max-height: 300px; min-width: 120px; min-height: 80px; border-radius: 12px; cursor: zoom-in; object-fit: cover; background: rgba(0,0,0,.08); }
.sc-voice { display: flex; align-items: center; gap: .6rem; min-width: 180px; }
.sc-play { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-acc); color: #fff; flex: none; }
.sc-m.me .sc-play { background: #fff; color: #4f46e5; }
.sc-wave { flex: 1; height: 6px; border-radius: 99px; background: rgba(128,128,160,.35); overflow: hidden; min-width: 70px; }
.sc-wave i { display: block; height: 100%; width: 0; background: var(--sc-acc); border-radius: 99px; }
.sc-m.me .sc-wave { background: rgba(255,255,255,.35); } .sc-m.me .sc-wave i { background: #fff; }
.sc-vt { font-size: .78rem; font-variant-numeric: tabular-nums; opacity: .85; }
.sc-zoom { position: fixed; inset: 0; z-index: 100002; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; }
.sc-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.sc-zoom button { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 1.1rem; cursor: pointer; }

.sc-live { color: #e8a317; font-size: .72rem; }
.sc-toast { position: fixed; right: 16px; bottom: 84px; z-index: 99990; max-width: min(340px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 2px; padding: .7rem 1rem; border-radius: 14px; cursor: pointer;
  background: #1e1b4b; color: #fff; box-shadow: 0 14px 34px rgba(15,23,42,.4); animation: scToast .25s ease; }
.sc-toast span { opacity: .85; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes scToast { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }