/*
 * De Tectis — reports.php
 * Phase R1: static visual shell / visual match.
 */

:root {
  --aeterna-page-background: url("../img/aeterna-page-background.png");
  --social-bg: #010404;
  --social-panel: rgba(5, 12, 12, .78);
  --social-panel-soft: rgba(9, 18, 17, .64);
  --social-border: rgba(139, 190, 71, .22);
  --social-border-hot: rgba(159, 230, 83, .50);
  --social-green: #9fe653;
  --social-green-2: #78ff44;
  --social-text: #f1f4ed;
  --social-muted: #8b9588;
  --social-soft: #b9c5b8;
  --social-red: #ff3d2e;
  --social-amber: #ffcc66;
  --social-blue: #4aa8ff;
  --social-sidebar: 164px;
  --social-rail: 292px;
  --social-gap: 18px;
}

* {
  box-sizing: border-box;
}

body.reports-social-page {
  margin: 0;
  min-height: 100vh;
  color: var(--social-text);
  background-color: var(--social-bg);
  background-image:
    linear-gradient(180deg, rgba(1, 4, 4, .34), rgba(1, 4, 4, .90)),
    radial-gradient(circle at 50% 0%, rgba(112, 170, 54, .12), transparent 34%),
    var(--aeterna-page-background);
  background-size: cover, auto, cover;
  background-position: center top, center top, center top;
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat;
  font-family: "Inter", "Rajdhani", Arial, sans-serif;
  overflow-x: hidden;
}

body.reports-social-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(139, 190, 71, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 190, 71, .02) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 78%);
  z-index: 0;
}

body.reports-social-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 9%, rgba(159, 230, 83, .065), transparent 30%),
    linear-gradient(90deg, rgba(1, 4, 4, .96), rgba(1, 4, 4, .30) 22%, rgba(1, 4, 4, .30) 78%, rgba(1, 4, 4, .96));
  z-index: 0;
}

a,
button {
  font: inherit;
}

button {
  cursor: pointer;
}

.coalition-social-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--social-sidebar) minmax(0, 1fr) var(--social-rail);
  gap: var(--social-gap);
  min-height: 100vh;
  padding: 0 18px 74px 0;
}

.panel {
  border: 1px solid var(--social-border);
  background: var(--social-panel);
  border-radius: 10px;
  box-shadow: 0 20px 58px rgba(0,0,0,.30);
  backdrop-filter: blur(2px);
}

/* Sidebar */

.social-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 14px 18px;
  border-right: 1px solid rgba(139, 190, 71, .12);
  background: linear-gradient(180deg, rgba(1, 5, 5, .90), rgba(1, 5, 5, .72));
  overflow-y: auto;
}

.social-logo {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--social-text);
  text-decoration: none;
  margin-bottom: 18px;
}

.social-logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 58px;
}

.social-logo-mark::before,
.social-logo-mark::after,
.social-logo-mark i {
  content: "";
  position: absolute;
  border: 1px solid rgba(159, 230, 83, .64);
  border-radius: 50%;
}

.social-logo-mark::before {
  width: 76px;
  height: 26px;
}

.social-logo-mark::after {
  width: 40px;
  height: 40px;
}

.social-logo-mark i {
  width: 12px;
  height: 12px;
  background: rgba(159, 230, 83, .15);
  transform: rotate(45deg);
  border-radius: 2px;
}

.social-logo strong {
  font-family: "Rajdhani", "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 16px;
}

.social-nav {
  display: grid;
  gap: 5px;
}

.social-nav a {
  min-height: 38px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--social-soft);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 800;
  font-size: 11px;
}

.social-nav a span {
  color: var(--social-green);
  text-align: center;
}

.social-nav a em {
  font-style: normal;
}

.social-nav a b {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(159, 230, 83, .15);
  color: var(--social-green);
  font-size: 9px;
}

.social-nav a:hover,
.social-nav a.active {
  border-color: rgba(159, 230, 83, .36);
  background: rgba(139, 190, 71, .11);
  color: var(--social-green);
}

.sidebar-status-card,
.sidebar-quote-card {
  margin-top: 18px;
  border: 1px solid rgba(139, 190, 71, .18);
  background: rgba(2, 7, 7, .68);
  border-radius: 9px;
  padding: 12px;
}

.sidebar-status-card h2 {
  margin: 0 0 10px;
  color: var(--social-green);
  font-size: 13px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.sidebar-status-card dl {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.sidebar-status-card div {
  display: grid;
  gap: 2px;
}

.sidebar-status-card dt {
  color: var(--social-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.sidebar-status-card dd {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.sidebar-status-card .ok {
  color: var(--social-green);
}

.sidebar-status-card .warn {
  color: var(--social-amber);
}

.sidebar-status-card a {
  display: block;
  color: var(--social-green);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .8px;
}

.sidebar-quote-card p {
  margin: 0 0 8px;
  color: var(--social-soft);
  line-height: 1.4;
  font-size: 12px;
}

.sidebar-quote-card span {
  color: var(--social-muted);
  font-size: 10px;
}

/* Main header */

.coalition-social-main {
  min-width: 0;
  padding-top: 22px;
}

.social-header {
  position: relative;
  display: grid;
  gap: 14px;
  align-items: start;
  padding-top: 10px;
  margin-bottom: 8px;
}

.social-utility-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 305px) auto;
  gap: 12px;
  align-items: center;
  min-height: 40px;
}

.social-utility-spacer {
  min-height: 1px;
}

.social-title-wrap {
  text-align: center;
  padding: 6px 0 2px;
}

.social-title-wrap h1 {
  margin: 0;
  color: #f5f7f0;
  text-transform: uppercase;
  letter-spacing: 12px;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 54px);
  text-shadow: 0 0 20px rgba(255,255,255,.10);
}

.social-title-wrap p {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.social-title-wrap p span {
  display: block;
  width: 92px;
  height: 1px;
  background: rgba(159, 230, 83, .38);
}

.social-title-wrap i {
  display: inline-grid;
  place-items: center;
  margin-top: 10px;
  width: 18px;
  height: 18px;
  color: var(--social-green);
  border: 1px solid rgba(159, 230, 83, .28);
  border-radius: 50%;
  font-style: normal;
  font-size: 10px;
}

.social-search {
  position: relative;
  width: 100%;
  height: 40px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 24px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(139, 190, 71, .18);
  border-radius: 7px;
  background: rgba(2, 7, 7, .72);
}

.social-search span {
  color: var(--social-green);
}

.social-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--social-text);
  font-size: 12px;
}

.social-search button {
  border: 1px solid rgba(159, 230, 83, .22);
  background: rgba(139, 190, 71, .10);
  color: var(--social-green);
  border-radius: 5px;
  height: 22px;
}

.social-account-cluster {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-icon-button,
.social-user-pill {
  border: 1px solid rgba(139, 190, 71, .18);
  background: rgba(2, 7, 7, .74);
  color: var(--social-green);
  border-radius: 999px;
}

.social-icon-button {
  position: relative;
  width: 40px;
  height: 40px;
}

.social-icon-button.has-alert::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--social-red);
  border-radius: 50%;
  box-shadow: 0 0 9px var(--social-red);
}

.social-user-pill {
  min-width: 148px;
  height: 40px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 42px 14px;
  gap: 7px;
  align-items: center;
  padding: 0 9px 0 6px;
  text-align: left;
}

.social-user-pill span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(159,230,83,.18), rgba(2,7,7,.86));
  border: 1px solid rgba(159, 230, 83, .30);
  border-radius: 50%;
  color: var(--social-text);
  font-size: 12px;
  font-weight: 900;
}

.social-user-pill strong {
  overflow: hidden;
  color: var(--social-text);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.social-user-pill em {
  color: var(--social-green);
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

/* Composer and controls */

.social-composer,
.social-feed-controls {
  padding: 14px;
  margin-bottom: 14px;
}

.composer-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.composer-avatar,
.social-avatar {
  display: grid;
  place-items: center;
  border: 1px solid rgba(159, 230, 83, .28);
  background: radial-gradient(circle, rgba(159,230,83,.18), rgba(2,7,7,.78));
  color: var(--social-green);
  font-weight: 900;
}

.composer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.composer-input {
  min-height: 48px;
  border: 1px solid rgba(139, 190, 71, .14);
  background: rgba(2, 6, 6, .52);
  color: var(--social-muted);
  border-radius: 9px;
  padding: 0 14px;
  text-align: left;
}

.composer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-left: 54px;
}

.composer-actions button,
.social-feed-tabs a,
.feed-control-actions button {
  min-height: 30px;
  border: 1px solid rgba(139, 190, 71, .15);
  background: rgba(2, 6, 6, .50);
  color: var(--social-soft);
  border-radius: 999px;
  padding: 0 11px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .75px;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 800;
  font-size: 11px;
}

.composer-actions button.active,
.social-feed-tabs a.active,
.composer-actions button:hover,
.social-feed-tabs a:hover,
.feed-control-actions button:hover {
  color: var(--social-green);
  border-color: rgba(159, 230, 83, .42);
  background: rgba(139, 190, 71, .10);
}

.composer-actions button span {
  margin-right: 5px;
}

.social-feed-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.social-feed-tabs,
.feed-control-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Feed cards */

.social-feed {
  display: grid;
  gap: 14px;
  padding-bottom: 80px;
}

.social-card {
  padding: 18px;
}

.social-card:hover {
  border-color: rgba(159, 230, 83, .36);
}

.rebroadcast-line {
  margin-bottom: 10px;
  color: var(--social-muted);
  font-size: 12px;
}

.social-card-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: start;
}

.social-avatar {
  width: 48px;
  height: 48px;
  border-radius: 13px;
}

.author-meta {
  display: grid;
  gap: 4px;
}

.author-meta strong {
  color: var(--social-text);
  font-size: 15px;
}

.author-meta strong em {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 3px;
  border: 1px solid rgba(159,230,83,.34);
  border-radius: 50%;
  color: var(--social-green);
  font-size: 9px;
  font-style: normal;
}

.author-meta span {
  color: var(--social-muted);
  font-size: 12px;
}

.author-meta div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.author-meta b {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 7px;
  border: 1px solid rgba(159, 230, 83, .20);
  border-radius: 999px;
  color: var(--social-green);
  background: rgba(139, 190, 71, .08);
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.post-menu {
  width: 34px;
  height: 28px;
  border: 1px solid rgba(139, 190, 71, .13);
  background: transparent;
  color: var(--social-muted);
  border-radius: 8px;
}

.social-post-body {
  margin: 14px 0;
  color: var(--social-soft);
  font-size: 14px;
  line-height: 1.62;
}

.social-embed-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  position: relative;
  min-height: 148px;
  padding: 14px;
  border: 1px solid rgba(139, 190, 71, .18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 26%, rgba(159,230,83,.12), transparent 28%),
    linear-gradient(135deg, rgba(8, 25, 30, .75), rgba(2, 6, 6, .90));
  color: var(--social-text);
  text-decoration: none;
  overflow: hidden;
}

.social-embed-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(159,230,83,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,230,83,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .55;
}

.social-embed-card > * {
  position: relative;
  z-index: 1;
}

.embed-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 104px;
  border: 1px solid rgba(159, 230, 83, .28);
  background: rgba(2, 7, 7, .60);
  border-radius: 10px;
  color: var(--social-green);
  font-size: 28px;
}

.social-embed-card div {
  display: grid;
  align-content: center;
  gap: 5px;
}

.social-embed-card em {
  color: var(--social-green);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .9px;
}

.social-embed-card strong {
  font-size: 19px;
  line-height: 1.15;
}

.social-embed-card p {
  margin: 0;
  color: var(--social-soft);
  font-size: 13px;
  line-height: 1.4;
}

.social-embed-card small {
  color: var(--social-muted);
  font-size: 11px;
}

.social-embed-card i {
  position: absolute;
  right: 14px;
  bottom: 13px;
  z-index: 2;
  color: var(--social-green);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.transmission-embed {
  background:
    radial-gradient(circle at 14% 28%, rgba(74,168,255,.13), transparent 26%),
    linear-gradient(135deg, rgba(7, 18, 28, .78), rgba(2, 6, 6, .90));
}

.event-embed {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,204,102,.12), transparent 28%),
    linear-gradient(135deg, rgba(33, 25, 8, .72), rgba(2, 6, 6, .90));
}

.image-grid-embed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.image-grid-embed div {
  min-height: 190px;
  display: grid;
  place-items: end start;
  padding: 14px;
  border: 1px solid rgba(139, 190, 71, .18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 52% 42%, rgba(159,230,83,.12), transparent 20%),
    linear-gradient(135deg, rgba(9, 28, 24, .82), rgba(2, 6, 6, .92));
  overflow: hidden;
}

.image-grid-embed div:nth-child(2) {
  background:
    radial-gradient(circle at 52% 42%, rgba(255,255,255,.10), transparent 22%),
    linear-gradient(135deg, rgba(37, 41, 44, .82), rgba(2, 6, 6, .94));
}

.image-grid-embed span {
  color: var(--social-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.social-card-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 190, 71, .13);
}

.social-card-actions button {
  border: 0;
  background: transparent;
  color: var(--social-muted);
  min-height: 30px;
  min-width: 36px;
}

.social-card-actions button:hover,
.social-card-actions .signal-action {
  color: var(--social-green);
}

.social-card-actions span {
  margin-left: 4px;
}

/* Right rail */

.coalition-social-rail {
  position: sticky;
  top: 16px;
  align-self: start;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 28px);
  padding-top: 22px;
  padding-bottom: 28px;
  overflow-y: auto;
}

.social-rail-panel {
  padding: 14px;
}

.rail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.rail-title-row h2 {
  margin: 0;
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rail-title-row a,
.social-rail-panel a {
  text-decoration: none;
}

.rail-title-row a {
  color: var(--social-green);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .75px;
}

.trending-topic-list,
.active-node-list {
  display: grid;
  gap: 8px;
}

.trending-topic-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--social-text);
  min-height: 30px;
}

.trending-topic-row span {
  color: var(--social-green);
  font-size: 11px;
}

.trending-topic-row strong {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trending-topic-row em {
  color: var(--social-green);
  font-style: normal;
  font-size: 11px;
}

.active-node-row,
.suggested-researcher-row,
.popular-report-row,
.live-room-row {
  display: grid;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  color: var(--social-text);
}

.active-node-row {
  grid-template-columns: 24px minmax(0, .84fr) minmax(0, 1fr) auto;
}

.active-node-row span {
  color: var(--social-green);
}

.active-node-row strong,
.suggested-researcher-row strong,
.popular-report-row strong,
.live-room-row strong {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.active-node-row em {
  overflow: hidden;
  color: var(--social-muted);
  font-style: normal;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.active-node-row b {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(159,230,83,.10);
  color: var(--social-green);
  font-size: 9px;
}

.active-node-row.idle b {
  color: var(--social-amber);
}

.suggested-researcher-row {
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  margin-bottom: 9px;
}

.suggested-researcher-row span,
.popular-report-row span,
.live-room-row span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(159,230,83,.20);
  border-radius: 8px;
  background: rgba(2,6,6,.56);
  color: var(--social-green);
  font-size: 11px;
  font-weight: 900;
}

.suggested-researcher-row div,
.popular-report-row div,
.live-room-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.suggested-researcher-row em,
.popular-report-row em,
.live-room-row em {
  overflow: hidden;
  color: var(--social-muted);
  font-style: normal;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.suggested-researcher-row button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(159,230,83,.24);
  background: rgba(139,190,71,.08);
  color: var(--social-green);
  border-radius: 50%;
}

.popular-report-row {
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  color: var(--social-text);
  margin-bottom: 10px;
}

.popular-report-row b {
  color: var(--social-green);
  font-size: 12px;
}

.live-room-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  color: var(--social-text);
  margin-bottom: 10px;
}

.live-room-row b {
  color: var(--social-red);
  font-size: 9px;
  text-shadow: 0 0 8px rgba(255,61,46,.42);
}

.community-signal-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas:
    "chart value change"
    "chart label change";
  gap: 2px 10px;
  align-items: center;
  margin-bottom: 11px;
}

.community-signal-row span {
  grid-area: chart;
  display: grid;
  place-items: center;
  width: 42px;
  height: 30px;
  border: 1px solid rgba(159,230,83,.16);
  border-radius: 7px;
  overflow: hidden;
}

.community-signal-row i {
  display: block;
  width: 32px;
  height: 18px;
  background:
    linear-gradient(135deg, transparent 42%, rgba(159,230,83,.75) 43% 48%, transparent 49%),
    linear-gradient(45deg, transparent 44%, rgba(159,230,83,.55) 45% 50%, transparent 51%);
}

.community-signal-row strong {
  grid-area: value;
  color: var(--social-text);
}

.community-signal-row em {
  grid-area: label;
  color: var(--social-muted);
  font-style: normal;
  font-size: 10px;
}

.community-signal-row b {
  grid-area: change;
  color: var(--social-green);
  font-size: 11px;
}

/* Footer and toast */

.social-footer {
  position: relative;
  z-index: 2;
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 2px;
  border-top: 1px solid rgba(139,190,71,.10);
  background: rgba(1, 4, 4, .74);
  color: var(--social-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  backdrop-filter: blur(3px);
  margin: 10px 18px 24px calc(var(--social-sidebar) + var(--social-gap));
  border-radius: 10px;
}

.social-footer span {
  color: var(--social-green);
}

.social-footer p {
  margin: 0;
}

.social-r1-toast {
  position: fixed;
  right: 22px;
  bottom: 58px;
  z-index: 5;
  max-width: 360px;
  border: 1px solid rgba(159,230,83,.38);
  background: rgba(2, 8, 8, .92);
  color: var(--social-green);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  font-size: 12px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.social-r1-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Desktop density */

@media (min-width: 1200px) and (max-width: 1500px) {
  :root {
    --social-sidebar: 156px;
    --social-rail: 262px;
    --social-gap: 12px;
  }

  .coalition-social-shell {
    padding-right: 12px;
  }

  .social-title-wrap h1 {
    font-size: 38px;
    letter-spacing: 10px;
  }

  .social-title-wrap p {
    font-size: 12px;
    letter-spacing: 4px;
  }

  .social-utility-bar {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px) auto;
  }

  .social-user-pill {
    min-width: 124px;
    grid-template-columns: 28px minmax(0, 1fr) 32px 12px;
  }

  .social-card {
    padding: 15px;
  }

  .social-embed-card {
    min-height: 132px;
  }

  .embed-icon {
    width: 78px;
    height: 92px;
  }
}

/* Responsive */

@media (max-width: 1120px) {
  .coalition-social-shell {
    grid-template-columns: var(--social-sidebar) minmax(0, 1fr);
  }

  .coalition-social-rail {
    grid-column: 2;
    position: static;
    max-height: none;
    padding-top: 0;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 820px) {
  .coalition-social-shell {
    grid-template-columns: 1fr;
    padding: 0 12px 74px;
  }

  .social-sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(139, 190, 71, .12);
    border-radius: 0 0 12px 12px;
  }

  .social-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coalition-social-main,
  .coalition-social-rail {
    grid-column: 1;
  }

  .social-header {
    padding-top: 12px;
  }

  .social-title-wrap h1 {
    font-size: 32px;
    letter-spacing: 6px;
  }

  .social-title-wrap p {
    gap: 8px;
    font-size: 10px;
    letter-spacing: 2px;
  }

  .social-title-wrap p span {
    width: 42px;
  }

  .social-utility-bar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .social-search,
  .social-account-cluster {
    width: 100%;
    margin-top: 0;
  }

  .social-account-cluster {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .social-feed-controls,
  .social-card-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .composer-actions {
    padding-left: 0;
  }

  .social-embed-card,
  .image-grid-embed {
    grid-template-columns: 1fr;
  }

  .embed-icon {
    width: 100%;
    height: 88px;
  }

  .social-footer {
    margin: 10px 12px 24px;
  }
}


/* -------------------------------------------------------------------------
   Phase R1.2 — Pixel-match visual fidelity pass
   Focus: target spacing, header proportions, feed width, right-rail gutter,
   richer cards/media, and annotated padding corrections.
------------------------------------------------------------------------- */
:root {
  --social-sidebar: 136px;
  --social-feed-width: 525px;
  --social-rail: 284px;
  --social-main-gutter: 78px;
  --social-feed-rail-gutter: 60px;
  --social-shell-max: 1122px;
  --social-card-radius: 8px;
  --social-panel: rgba(5, 13, 14, .78);
  --social-panel-strong: rgba(4, 12, 14, .88);
  --social-border: rgba(125, 190, 67, .25);
  --social-border-hot: rgba(159, 230, 83, .48);
  --social-green: #9fe653;
  --social-green-2: #78ff44;
  --social-text: #eef4ec;
  --social-muted: #8d9b8e;
  --social-soft: #c2cec1;
}

body.reports-social-page {
  background-image:
    linear-gradient(180deg, rgba(1, 4, 4, .18), rgba(1, 4, 4, .87)),
    radial-gradient(circle at 50% 0%, rgba(112, 170, 54, .10), transparent 34%),
    var(--aeterna-page-background);
}

/* Target is an app-like centered canvas, not a full-width admin row. */
.coalition-social-shell {
  width: min(100%, var(--social-shell-max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--social-sidebar) var(--social-main-gutter) var(--social-feed-width) var(--social-feed-rail-gutter) var(--social-rail);
  gap: 0;
  padding: 0 0 70px;
}

.social-sidebar {
  grid-column: 1 / 2;
  width: var(--social-sidebar);
  padding: 31px 13px 28px;
  border-right: 1px solid rgba(139, 190, 71, .16);
  background:
    linear-gradient(180deg, rgba(2, 7, 9, .86), rgba(2, 7, 9, .68)),
    linear-gradient(90deg, rgba(159, 230, 83, .025), transparent);
}

.coalition-social-main {
  grid-column: 3 / 4;
  width: var(--social-feed-width);
  padding-top: 14px;
}

.coalition-social-rail {
  grid-column: 5 / 6;
  width: var(--social-rail);
  padding-top: 86px;
  gap: 14px;
}

/* Header target: title centered over feed, utility cluster on the right top band. */
.social-header {
  display: grid;
  gap: 12px;
  padding-top: 2px;
  margin-bottom: 15px;
}

.social-utility-bar {
  position: fixed;
  z-index: 12;
  top: 10px;
  left: calc(50% + 160px);
  width: 440px;
  display: grid;
  grid-template-columns: 172px 32px 32px 164px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
}

.social-utility-spacer {
  display: none;
}

.social-title-wrap {
  position: relative;
  width: var(--social-feed-width);
  padding: 2px 0 14px;
  text-align: center;
}

.social-title-wrap::before,
.social-title-wrap::after {
  content: "";
  position: absolute;
  top: 25px;
  width: 134px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(159, 230, 83, .34), rgba(159, 230, 83, .18));
}

.social-title-wrap::before {
  right: calc(100% + 44px);
}

.social-title-wrap::after {
  left: calc(100% + 44px);
  transform: scaleX(-1);
}

.social-title-wrap h1 {
  font-family: "Bebas Neue", "Rajdhani", "Inter", sans-serif;
  font-size: 30px;
  line-height: .95;
  letter-spacing: 10px;
  font-weight: 400;
  margin: 0;
  color: #f4f7f1;
  text-shadow:
    0 0 18px rgba(255,255,255,.13),
    0 0 32px rgba(159,230,83,.06);
}

.social-title-wrap p {
  margin: 10px 0 0;
  gap: 13px;
  color: var(--social-green);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 3.1px;
  font-weight: 900;
}

.social-title-wrap p span {
  width: 0;
  display: none;
}

.social-title-wrap i {
  margin-top: 9px;
  width: 12px;
  height: 12px;
  border-color: rgba(159,230,83,.38);
  color: var(--social-green);
  font-size: 8px;
  background: rgba(4,12,14,.60);
}

/* Target utility controls. */
.social-search {
  width: 172px;
  height: 35px;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  padding: 0 9px;
  border: 1px solid rgba(159, 230, 83, .22);
  border-radius: 7px;
  background: rgba(4, 10, 12, .82);
  box-shadow: inset 0 0 14px rgba(0,0,0,.18);
}

.social-search input {
  font-size: 10px;
  color: var(--social-soft);
}

.social-search input::placeholder {
  color: rgba(194, 206, 193, .72);
}

.social-search span {
  font-size: 15px;
}

.social-search button {
  height: 18px;
  width: 16px;
  font-size: 10px;
  padding: 0;
}

.social-account-cluster {
  display: contents;
}

.social-icon-button {
  width: 32px;
  height: 32px;
  border-color: rgba(159,230,83,.23);
  background: rgba(4, 10, 12, .82);
  border-radius: 50%;
  font-size: 13px;
  box-shadow: inset 0 0 12px rgba(159,230,83,.035);
}

.social-icon-button.has-alert::after {
  right: 1px;
  top: 0;
  width: 6px;
  height: 6px;
  background: #ff3d2e;
  border: 1px solid rgba(4,10,12,.95);
}

.social-user-pill {
  width: 164px;
  min-width: 164px;
  height: 38px;
  grid-template-columns: 30px minmax(0, 1fr) 38px 12px;
  gap: 7px;
  padding: 0 9px 0 5px;
  border-radius: 9px;
  background: rgba(4, 10, 12, .82);
  border-color: rgba(159,230,83,.22);
}

.social-user-pill span {
  width: 30px;
  height: 30px;
  color: transparent;
  background:
    radial-gradient(circle at 52% 38%, rgba(232, 222, 190, .18), transparent 17%),
    radial-gradient(circle at 50% 45%, rgba(105, 115, 92, .82), rgba(18, 24, 20, .92) 60%, rgba(2, 8, 9, .96));
  border-color: rgba(190, 210, 160, .26);
}

.social-user-pill strong {
  font-size: 10px;
  line-height: 1;
}

.social-user-pill em {
  font-size: 9px;
  color: var(--social-green);
}

/* Composer: restore target card size and internal proportions. */
.social-composer {
  padding: 0;
  min-height: 116px;
  margin-bottom: 14px;
  overflow: hidden;
  background: rgba(5, 13, 14, .76);
}

.composer-main {
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 74px;
  gap: 16px;
  padding: 14px 18px 11px;
  border-bottom: 1px solid rgba(139,190,71,.15);
}

.composer-avatar,
.composer-sigil {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: transparent;
  background:
    radial-gradient(circle, rgba(159,230,83,.10), transparent 62%),
    rgba(2,7,7,.62);
}

.composer-sigil {
  position: relative;
}

.composer-sigil::before,
.composer-sigil::after,
.composer-sigil i {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(159,230,83,.58);
}

.composer-sigil::after {
  inset: 17px;
  border-radius: 50%;
}

.composer-sigil i {
  inset: 21px;
  transform: rotate(45deg);
}

.composer-input {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: rgba(238,244,236,.72);
  font-size: 16px;
  padding: 0;
}

.composer-actions {
  margin: 0;
  padding: 0 18px 13px 92px;
  gap: 22px;
}

.composer-actions button {
  min-height: 27px;
  border: 0;
  border-radius: 0;
  padding: 0 0 7px;
  background: transparent;
  color: var(--social-soft);
  font-size: 12px;
  letter-spacing: .1px;
  text-transform: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

.composer-actions button.active {
  background: transparent;
  border-color: var(--social-green);
  color: #f2f6ef;
}

/* Feed controls target size. */
.social-feed-controls {
  min-height: 46px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.social-feed-tabs {
  gap: 4px;
}

.social-feed-tabs a {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: .1px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.feed-control-actions button {
  min-height: 31px;
  padding: 0 11px;
  border-radius: 6px;
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0;
  font-family: "Inter", sans-serif;
}

/* Subtle DB marker must not disturb pixel match. */
.social-data-mode {
  opacity: .22;
  font-size: 9px;
  height: 0;
  overflow: visible;
  text-align: right;
  color: var(--social-green);
  transform: translateY(-6px);
}

/* Feed cards: target-like modern post proportions. */
.social-feed {
  gap: 8px;
  padding-bottom: 0;
}

.social-card {
  padding: 17px 20px 14px;
  min-height: 304px;
  border-radius: var(--social-card-radius);
  background:
    linear-gradient(180deg, rgba(7, 17, 20, .86), rgba(3, 10, 12, .88)),
    radial-gradient(circle at 8% 15%, rgba(159,230,83,.035), transparent 38%);
  border-color: rgba(125, 190, 67, .24);
  box-shadow:
    0 20px 44px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.012);
}

.social-card-header {
  grid-template-columns: 44px minmax(0, 1fr) 30px;
  gap: 11px;
}

.social-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

/* Faux portraits/emblems by author category, until real upload assets are wired. */
.social-card-report .social-avatar,
.social-card-image .social-avatar,
.social-card-event .social-avatar {
  background:
    radial-gradient(circle at 50% 28%, rgba(234, 218, 195, .42), transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(64, 47, 43, .85), rgba(17, 25, 24, .92) 52%, rgba(3, 10, 12, 1));
}

.social-card-transmission .social-avatar {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(159,230,83,.12), transparent 62%),
    rgba(2,7,7,.70);
}

.social-card-transmission .social-avatar::before {
  content: "◎";
  color: var(--social-green);
  font-size: 25px;
}

.author-meta strong {
  font-size: 14px;
  line-height: 1.1;
}

.author-meta span {
  font-size: 11px;
}

.author-meta div {
  gap: 5px;
}

.author-meta b {
  min-height: 19px;
  padding: 3px 7px;
  font-size: 9px;
}

.post-menu {
  width: 28px;
  height: 26px;
  border-radius: 7px;
  background: rgba(2,6,6,.36);
}

.social-post-body {
  margin: 14px 0 12px 56px;
  font-size: 13px;
  line-height: 1.55;
  color: #d0d9cf;
}

/* Embeds match target thumbnail + text + CTA layout. */
.social-embed-card {
  grid-template-columns: 118px minmax(0, 1fr) auto;
  min-height: 120px;
  margin-left: 56px;
  padding: 0;
  gap: 0;
  border-radius: 7px;
  background: rgba(8, 20, 20, .62);
}

.embed-icon {
  width: 118px;
  height: 118px;
  border: 0;
  border-right: 1px solid rgba(139,190,71,.14);
  border-radius: 7px 0 0 7px;
  background:
    radial-gradient(circle at center, rgba(159,230,83,.20), transparent 11%),
    conic-gradient(from 45deg, transparent, rgba(159,230,83,.12), transparent 34%, rgba(159,230,83,.14), transparent 68%),
    rgba(4,13,12,.82);
  font-size: 0;
}

.embed-icon::before {
  content: "";
  width: 72px;
  height: 72px;
  border: 1px solid rgba(159,230,83,.56);
  border-radius: 2px;
  background:
    linear-gradient(60deg, transparent 48%, rgba(159,230,83,.55) 49% 51%, transparent 52%),
    linear-gradient(-60deg, transparent 48%, rgba(159,230,83,.35) 49% 51%, transparent 52%),
    radial-gradient(circle, transparent 40%, rgba(159,230,83,.25) 41% 43%, transparent 44%);
}

.social-embed-card div {
  padding: 20px 16px;
  align-content: center;
}

.social-embed-card em {
  font-size: 10px;
  letter-spacing: 1px;
}

.social-embed-card strong {
  font-size: 16px;
  line-height: 1.16;
}

.social-embed-card p {
  font-size: 12px;
}

.social-embed-card small {
  font-size: 11px;
}

.social-embed-card i {
  position: static;
  align-self: end;
  justify-self: end;
  margin: 0 18px 17px 8px;
  min-width: 92px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(159,230,83,.26);
  border-radius: 5px;
  background: rgba(3,9,10,.60);
  font-size: 11px;
  text-align: center;
}

.social-card-actions {
  margin-left: 56px;
  margin-top: 13px;
  padding-top: 11px;
  justify-content: space-between;
}

.social-card-actions button {
  min-width: 54px;
  color: #b4beb3;
  font-size: 14px;
}

.social-card-actions .signal-action {
  color: var(--social-green);
  font-weight: 800;
}

/* Image post target: two rich panels with real-looking diagram surfaces. */
.image-grid-embed {
  margin-left: 56px;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.image-grid-embed div {
  min-height: 104px;
  border-radius: 6px;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(159,230,83,.42) 23% 24%, transparent 25% 35%, rgba(159,230,83,.28) 36% 37%, transparent 38%),
    linear-gradient(45deg, transparent 49%, rgba(159,230,83,.38) 50%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(159,230,83,.22) 50%, transparent 51%),
    rgba(4, 17, 14, .84);
}

.image-grid-embed .scan-panel {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(220,230,230,.34) 21% 22%, transparent 23% 33%, rgba(220,230,230,.22) 34% 35%, transparent 36%),
    linear-gradient(18deg, transparent 49%, rgba(220,230,230,.22) 50%, transparent 51%),
    rgba(20, 23, 25, .88);
}

.image-grid-embed span {
  color: rgba(238,244,236,.74);
  font-size: 10px;
}

/* Event card thumbnail should resemble portrait panel, not generic icon. */
.social-card-event .embed-icon {
  background:
    radial-gradient(circle at 48% 32%, rgba(214, 185, 142, .42), transparent 15%),
    radial-gradient(circle at 50% 58%, rgba(70, 47, 37, .85), rgba(13, 18, 18, .96) 58%),
    linear-gradient(135deg, rgba(68, 50, 24, .55), rgba(2,6,6,.94));
}

.social-card-event .embed-icon::before {
  display: none;
}

/* Sidebar target spacing. */
.social-logo {
  margin-bottom: 28px;
}

.social-logo-mark {
  width: 82px;
  height: 52px;
}

.social-logo strong {
  font-size: 15px;
  letter-spacing: 4px;
}

.social-nav {
  gap: 6px;
}

.social-nav a {
  min-height: 34px;
  padding: 0 8px;
  font-size: 10px;
  letter-spacing: 1.15px;
}

.sidebar-status-card {
  margin-top: 262px;
  padding: 13px 12px 15px;
}

.sidebar-quote-card {
  margin-top: 28px;
  padding: 16px 12px;
  min-height: 174px;
}

.sidebar-quote-card::after {
  content: "◈";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 24px auto 0;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 50%;
  color: var(--social-green);
}

/* Right rail target spacing/card internals. */
.social-rail-panel {
  padding: 16px 16px 15px;
  background:
    linear-gradient(180deg, rgba(7, 17, 20, .84), rgba(3, 10, 12, .90)),
    radial-gradient(circle at 15% 10%, rgba(159,230,83,.035), transparent 36%);
}

.rail-title-row {
  margin-bottom: 14px;
}

.rail-title-row h2 {
  font-size: 14px;
  letter-spacing: 1.55px;
}

.trending-topic-row {
  grid-template-columns: 26px minmax(0, 1fr) 42px;
  min-height: 27px;
  border-bottom: 1px solid rgba(139,190,71,.08);
}

.active-node-row {
  grid-template-columns: 25px 62px minmax(0, 1fr) 42px;
  min-height: 34px;
}

.suggested-researcher-row {
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  min-height: 42px;
}

.popular-report-row,
.live-room-row {
  min-height: 42px;
}

.community-signal-row {
  min-height: 38px;
}

/* Footer target: centered and non-overlapping. */
.social-footer {
  width: min(100%, var(--social-shell-max));
  margin: -42px auto 24px;
  min-height: 42px;
  background: rgba(1,4,4,.56);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  pointer-events: none;
}

/* 1366px browser screenshots need target-like scaling, not full-width stretch. */
@media (min-width: 1200px) and (max-width: 1500px) {
  :root {
    --social-sidebar: 136px;
    --social-feed-width: 525px;
    --social-rail: 284px;
    --social-main-gutter: 78px;
    --social-feed-rail-gutter: 60px;
    --social-shell-max: 1122px;
  }

  .coalition-social-shell {
    grid-template-columns: var(--social-sidebar) var(--social-main-gutter) var(--social-feed-width) var(--social-feed-rail-gutter) var(--social-rail);
  }

  .social-title-wrap h1 {
    font-size: 30px;
    letter-spacing: 10px;
  }

  .social-title-wrap p {
    font-size: 10px;
    letter-spacing: 3.1px;
  }

  .social-utility-bar {
    left: calc(50% + 160px);
    width: 440px;
    grid-template-columns: 172px 32px 32px 164px;
  }

  .social-card {
    padding: 17px 20px 14px;
  }
}

/* Prevent target desktop overrides from breaking tablets/mobile. */
@media (max-width: 1130px) {
  .coalition-social-shell {
    width: 100%;
    grid-template-columns: var(--social-sidebar) minmax(0, 1fr);
    gap: 14px;
    padding: 0 14px 70px 0;
  }

  .coalition-social-main {
    grid-column: 2 / 3;
    width: auto;
  }

  .coalition-social-rail {
    grid-column: 2 / 3;
    width: auto;
    padding-top: 0;
    position: static;
  }

  .social-utility-bar {
    position: static;
    width: 100%;
    grid-template-columns: minmax(210px, 1fr) 32px 32px 164px;
  }

  .social-title-wrap {
    width: 100%;
  }

  .social-title-wrap::before,
  .social-title-wrap::after {
    display: none;
  }
}

@media (max-width: 820px) {
  .coalition-social-shell {
    grid-template-columns: 1fr;
    padding: 0 12px 74px;
  }

  .social-utility-bar {
    grid-template-columns: 1fr;
  }

  .social-card,
  .social-composer,
  .social-feed-controls {
    width: 100%;
  }

  .social-post-body,
  .social-embed-card,
  .image-grid-embed,
  .social-card-actions {
    margin-left: 0;
  }

  .social-embed-card {
    grid-template-columns: 1fr;
  }

  .embed-icon {
    width: 100%;
    height: 92px;
    border-right: 0;
    border-bottom: 1px solid rgba(139,190,71,.14);
    border-radius: 7px 7px 0 0;
  }

  .social-footer {
    width: auto;
    margin: 10px 12px 24px;
  }

  .sidebar-status-card {
    margin-top: 18px;
  }
}


/* -------------------------------------------------------------------------
   Phase R1.3 — Invisible scrollbars / scroll preserved
   Goal: keep every scrollable region functional while removing visible
   scrollbar rails/thumbs from the De Tectis surface.
------------------------------------------------------------------------- */

html:has(body.reports-social-page),
body.reports-social-page,
body.reports-social-page * {
  scrollbar-width: none !important;      /* Firefox */
  -ms-overflow-style: none !important;   /* IE / legacy Edge */
}

body.reports-social-page::-webkit-scrollbar,
body.reports-social-page *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

body.reports-social-page::-webkit-scrollbar-track,
body.reports-social-page *::-webkit-scrollbar-track,
body.reports-social-page::-webkit-scrollbar-thumb,
body.reports-social-page *::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 0 !important;
}

/* Preserve actual scrolling behavior in the regions that need it. */
body.reports-social-page {
  overflow-y: auto;
}

.social-sidebar,
.coalition-social-rail {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.coalition-social-main {
  overflow: visible;
}


/* -------------------------------------------------------------------------
   Phase R3 — Composer / Post Creation
------------------------------------------------------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

.social-composer-form {
  display: grid;
}

.composer-input-wrap {
  display: block;
  min-width: 0;
}

.composer-textarea {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  max-height: 220px;
  outline: 0;
  font: inherit;
  line-height: 1.45;
}

.social-composer.is-expanded .composer-textarea,
.composer-textarea:focus {
  color: var(--social-text);
}

.composer-attachment-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 18px 12px 92px;
}

.composer-attachment-fields[hidden] {
  display: none !important;
}

.composer-attachment-fields label {
  display: grid;
  gap: 4px;
}

.composer-attachment-fields label:last-child {
  grid-column: 1 / -1;
}

.composer-attachment-fields span {
  color: var(--social-green);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}

.composer-attachment-fields input {
  min-height: 34px;
  border: 1px solid rgba(139,190,71,.18);
  background: rgba(2, 7, 7, .72);
  color: var(--social-text);
  border-radius: 6px;
  padding: 0 10px;
  outline: 0;
}

.composer-attachment-fields input:focus {
  border-color: rgba(159,230,83,.45);
}

.composer-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0 18px 14px 92px;
}

.composer-submit-row p {
  margin: 0;
  color: var(--social-muted);
  font-size: 10px;
  line-height: 1.35;
}

.composer-submit-row p[data-state="ok"] {
  color: var(--social-green);
}

.composer-submit-row p[data-state="error"],
.social-r1-toast[data-state="error"] {
  color: #ff6a5c;
}

.composer-submit-row p[data-state="warn"] {
  color: var(--social-amber);
}

.composer-submit-button {
  min-width: 92px;
  min-height: 34px;
  border: 1px solid rgba(159,230,83,.38);
  background: rgba(139,190,71,.12);
  color: var(--social-green);
  border-radius: 7px;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-size: 11px;
  font-weight: 900;
}

.composer-submit-button:hover {
  border-color: rgba(159,230,83,.62);
  background: rgba(139,190,71,.18);
}

.composer-submit-button:disabled {
  opacity: .52;
  cursor: wait;
}

.social-empty-state {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--social-soft);
}

@media (max-width: 820px) {
  .composer-attachment-fields,
  .composer-submit-row {
    grid-template-columns: 1fr;
    padding-left: 18px;
  }
}


/* -------------------------------------------------------------------------
   Phase R4 — Interactions: comments, rebroadcasts, signals, bookmarks, shares
------------------------------------------------------------------------- */

.social-card-actions button {
  position: relative;
  border-radius: 999px;
  transition: color .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}

.social-card-actions button.is-active {
  color: var(--social-green);
  background: rgba(139,190,71,.08);
}

.social-card-actions button.is-syncing {
  opacity: .58;
  cursor: wait;
}

.social-comments-panel {
  margin: 10px 0 0 56px;
  padding-top: 10px;
  border-top: 1px solid rgba(139,190,71,.12);
}

.social-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.social-comment-form input[type="text"] {
  min-height: 34px;
  border: 1px solid rgba(139,190,71,.18);
  border-radius: 999px;
  background: rgba(2, 7, 7, .68);
  color: var(--social-text);
  outline: 0;
  padding: 0 12px;
  font-size: 12px;
}

.social-comment-form input[type="text"]:focus {
  border-color: rgba(159,230,83,.45);
}

.social-comment-form button {
  min-height: 34px;
  border: 1px solid rgba(159,230,83,.34);
  border-radius: 999px;
  background: rgba(139,190,71,.10);
  color: var(--social-green);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.social-comment-form button:disabled {
  opacity: .55;
  cursor: wait;
}

.social-comment-preview {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.social-comment-item {
  border: 1px solid rgba(139,190,71,.12);
  border-radius: 9px;
  background: rgba(2,7,7,.40);
  padding: 9px 10px;
}

.social-comment-item strong {
  color: var(--social-text);
  font-size: 12px;
}

.social-comment-item span {
  color: var(--social-muted);
  font-size: 10px;
  margin-left: 6px;
}

.social-comment-item p {
  margin: 5px 0 0;
  color: var(--social-soft);
  font-size: 12px;
  line-height: 1.45;
}

.social-r1-toast[data-state="warn"] {
  color: var(--social-amber);
  border-color: rgba(255,204,102,.34);
}

.social-r1-toast[data-state="neutral"] {
  color: var(--social-soft);
}

@media (max-width: 820px) {
  .social-comments-panel {
    margin-left: 0;
  }

  .social-comment-form {
    grid-template-columns: 1fr;
  }
}


/* Phase R4.1 — persistence/count feedback */
.social-card.has-updated-counts .social-card-actions {
  box-shadow: 0 0 0 1px rgba(159,230,83,.20);
  border-radius: 999px;
}

.social-comment-preview:not(:empty) {
  margin-top: 10px;
}


/* -------------------------------------------------------------------------
   Phase R5 — Aeterna Library + Signal Feed attachment picker
------------------------------------------------------------------------- */

.composer-picker-bar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0 18px 12px 92px;
}

.composer-picker-bar[hidden] {
  display: none !important;
}

.composer-picker-bar button,
.attachment-picker-search button {
  min-height: 30px;
  border: 1px solid rgba(159,230,83,.30);
  border-radius: 999px;
  background: rgba(139,190,71,.08);
  color: var(--social-green);
  padding: 0 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.composer-picker-bar small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--social-muted);
  font-size: 10px;
}

.composer-attachment-picker {
  margin: 0 18px 14px 92px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(6,18,18,.86), rgba(2,8,9,.88)),
    radial-gradient(circle at 10% 0%, rgba(159,230,83,.08), transparent 36%);
  overflow: hidden;
}

.composer-attachment-picker[hidden] {
  display: none !important;
}

.attachment-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(139,190,71,.14);
}

.attachment-picker-head strong {
  color: var(--social-green);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.attachment-picker-head button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(139,190,71,.22);
  border-radius: 50%;
  background: rgba(2,7,7,.58);
  color: var(--social-soft);
}

.attachment-picker-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 12px;
}

.attachment-picker-search input {
  min-height: 32px;
  border: 1px solid rgba(139,190,71,.18);
  border-radius: 999px;
  background: rgba(1,6,7,.72);
  color: var(--social-text);
  outline: 0;
  padding: 0 12px;
  font-size: 12px;
}

.attachment-picker-results {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 0 12px 12px;
}

.attachment-picker-results p {
  margin: 0;
  color: var(--social-muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 0;
}

.attachment-picker-item {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(139,190,71,.16);
  border-radius: 9px;
  background: rgba(2,8,8,.58);
  color: var(--social-text);
  padding: 10px 11px;
}

.attachment-picker-item:hover {
  border-color: rgba(159,230,83,.38);
  background: rgba(139,190,71,.08);
}

.attachment-picker-item span {
  color: var(--social-green);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
}

.attachment-picker-item strong {
  font-size: 13px;
  line-height: 1.2;
}

.attachment-picker-item em {
  color: var(--social-soft);
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
}

.attachment-picker-item small {
  color: var(--social-muted);
  font-size: 10px;
}

@media (max-width: 820px) {
  .composer-picker-bar,
  .composer-attachment-picker {
    margin-left: 18px;
    padding-left: 0;
  }

  .composer-picker-bar {
    grid-template-columns: 1fr;
  }

  .attachment-picker-search {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------------------------------
   Phase R6 — live right rail
------------------------------------------------------------------------- */

.coalition-social-rail[data-live-rail-root] {
  position: relative;
}

.live-rail-sync-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-top: 4px;
  color: rgba(194,206,193,.58);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.live-rail-sync-status::before {
  content: "◈";
  margin-right: 6px;
  color: var(--social-green);
  opacity: .78;
}

.live-rail-sync-status[data-state="syncing"] {
  color: var(--social-green);
}

.live-rail-sync-status[data-state="ok"] {
  color: rgba(159,230,83,.82);
}

.live-rail-sync-status[data-state="warn"] {
  color: var(--social-amber);
}

.live-rail-sync-status[data-state="error"] {
  color: #ff6a5c;
}

.coalition-social-rail.live-rail-synced .social-rail-panel {
  border-color: rgba(159,230,83,.34);
}


/* -------------------------------------------------------------------------
   Phase R6.1 — validation repair
   Fix: picked Signal Feed / Aeterna cards must not expand into tall narrow
   columns when the source title/summary is long.
------------------------------------------------------------------------- */

.social-embed-card {
  position: relative !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  padding-right: 126px !important;
  overflow: hidden !important;
}

.social-embed-card div {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.social-embed-card strong,
.social-embed-card p,
.social-embed-card small,
.social-embed-card em {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.social-embed-card strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.social-embed-card p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.social-embed-card small {
  display: block !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.social-embed-card i {
  position: absolute !important;
  right: 16px !important;
  bottom: 15px !important;
  margin: 0 !important;
  max-width: 104px !important;
}

.social-card-transmission .social-embed-card,
.social-card-report .social-embed-card,
.social-card-link .social-embed-card {
  min-height: 120px !important;
  max-height: 168px !important;
}

.composer-attachment-fields input {
  text-overflow: ellipsis;
}

.live-rail-sync-status[data-state="ready"] {
  color: rgba(194,206,193,.50);
}

@media (max-width: 900px) {
  .social-embed-card {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    padding-right: 0 !important;
  }

  .embed-icon {
    width: 92px !important;
    min-width: 92px !important;
  }

  .social-embed-card i {
    position: static !important;
    grid-column: 1 / -1;
    justify-self: stretch !important;
    max-width: none !important;
    margin: 0 12px 12px !important;
  }

  .social-card-transmission .social-embed-card,
  .social-card-report .social-embed-card,
  .social-card-link .social-embed-card {
    max-height: none !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R6.2 — console + visual validation repair
   Fixes:
   - @import rule location warning
   - named/id picker search input support
   - compact horizontal attachment card behavior under narrow/devtools widths
------------------------------------------------------------------------- */

.social-card .social-embed-card {
  width: 100% !important;
  align-items: stretch !important;
}

.social-card .social-embed-card .embed-icon {
  align-self: stretch !important;
  min-height: 96px !important;
}

.social-card .social-embed-card div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
}

.social-card .social-embed-card strong {
  font-size: clamp(15px, 1.55vw, 19px) !important;
  line-height: 1.12 !important;
}

.social-card .social-embed-card p {
  font-size: 12px !important;
  line-height: 1.34 !important;
  color: rgba(220,229,218,.82) !important;
}

.social-card .social-embed-card i {
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1.1 !important;
}

/* Use a bottom CTA only when the available card width is clearly narrow. */
@media (max-width: 1040px) {
  .social-embed-card {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    padding-right: 0 !important;
  }

  .social-embed-card i {
    position: static !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none !important;
    margin: 0 12px 12px !important;
  }

  .social-card-transmission .social-embed-card,
  .social-card-report .social-embed-card,
  .social-card-link .social-embed-card {
    max-height: none !important;
  }
}

/* Keep the target-like compact card for normal viewport widths. */
@media (min-width: 1041px) {
  .social-card-transmission .social-embed-card,
  .social-card-report .social-embed-card,
  .social-card-link .social-embed-card {
    min-height: 120px !important;
    max-height: 174px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R6.3 — right rail prepopulated slot/table support
------------------------------------------------------------------------- */

.coalition-social-rail[data-live-rail-slots="preseeded"] .social-rail-panel {
  min-height: 104px;
}

.coalition-social-rail [data-live-rail-list] {
  display: grid;
  gap: 8px;
  min-height: 42px;
}

.coalition-social-rail [data-live-rail-list="topics"],
.coalition-social-rail [data-live-rail-list="nodes"] {
  min-height: 192px;
}

.coalition-social-rail [data-live-rail-list="researchers"],
.coalition-social-rail [data-live-rail-list="reports"],
.coalition-social-rail [data-live-rail-list="rooms"],
.coalition-social-rail [data-live-rail-list="metrics"] {
  min-height: 118px;
}

.rail-slot-empty {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 64px;
  border: 1px dashed rgba(159,230,83,.18);
  border-radius: 8px;
  background: rgba(5, 13, 13, .38);
  padding: 12px;
  color: var(--social-muted);
}

.rail-slot-empty strong {
  color: var(--social-green);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.rail-slot-empty span {
  font-size: 11px;
}

.live-rail-sync-status {
  min-height: 26px;
  border: 1px solid rgba(139,190,71,.10);
  border-radius: 8px;
  background: rgba(3, 10, 10, .44);
}

/* Keep the rail from displaying thin empty panel strips while source rows load. */
.coalition-social-rail .social-rail-panel:has([data-live-rail-list]:empty) {
  min-height: 132px;
}


/* -------------------------------------------------------------------------
   Phase R6.4 — right rail restore
   Restore the target behavior: the right rail must flow with the page and keep
   all panels available. Earlier live wiring made the rail a clipped internal
   scroll region, which made lower panels look missing/empty.
------------------------------------------------------------------------- */

.coalition-social-rail {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: start !important;
}

.coalition-social-rail .social-rail-panel {
  min-height: auto !important;
  overflow: visible !important;
}

.coalition-social-rail [data-live-rail-list] {
  min-height: 0 !important;
}

.coalition-social-rail [data-live-rail-list="topics"],
.coalition-social-rail [data-live-rail-list="nodes"],
.coalition-social-rail [data-live-rail-list="researchers"],
.coalition-social-rail [data-live-rail-list="reports"],
.coalition-social-rail [data-live-rail-list="rooms"],
.coalition-social-rail [data-live-rail-list="metrics"] {
  min-height: 0 !important;
}

.coalition-social-rail [data-live-rail-list]:empty::before {
  content: "Awaiting source rows";
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px dashed rgba(159,230,83,.14);
  border-radius: 8px;
  color: rgba(194,206,193,.42);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.live-rail-sync-status {
  display: none !important;
}

/* Compact enough to keep the target rail dense, but not so short that rows vanish. */
.coalition-social-rail .social-rail-panel {
  padding: 14px !important;
}

.suggested-researcher-row,
.popular-report-row,
.live-room-row,
.community-signal-row {
  margin-bottom: 8px !important;
}

.coalition-social-rail .social-rail-panel:last-of-type {
  margin-bottom: 0;
}


/* -------------------------------------------------------------------------
   Phase R6.5 — message card boundary repair
   Observed: attachment/embed cards can overflow beyond the right edge of the
   parent message card because a previous repair forced width:100% while the
   embed still has a left avatar/content offset.
------------------------------------------------------------------------- */

.social-card {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.social-card > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.social-card .social-post-body,
.social-card .social-embed-card,
.social-card .image-grid-embed,
.social-card .social-card-actions,
.social-card .social-comments-panel {
  box-sizing: border-box !important;
}

/* Desktop target uses a 56px author-column inset. The embed width must subtract
   that inset instead of adding margin-left on top of width:100%. */
.social-card .social-embed-card,
.social-card .image-grid-embed,
.social-card .social-card-actions,
.social-card .social-comments-panel {
  width: calc(100% - 56px) !important;
  max-width: calc(100% - 56px) !important;
  margin-left: 56px !important;
  margin-right: 0 !important;
}

/* The embed itself should clip inside its own border, not bleed into the rail. */
.social-card .social-embed-card {
  overflow: hidden !important;
  contain: paint !important;
  justify-self: stretch !important;
}

/* Keep the CTA inside the embed grid. Earlier absolute/right rules could make
   it appear outside the message container when the card is narrow. */
.social-card .social-embed-card i {
  max-width: 112px !important;
  min-width: 92px !important;
  justify-self: end !important;
}

/* Clamp text so long source titles do not force horizontal growth. */
.social-card .social-embed-card div,
.social-card .social-embed-card strong,
.social-card .social-embed-card p,
.social-card .social-embed-card small,
.social-card .social-embed-card em {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* At the 1366px/desktop validation width, use a stable 3-column card only when
   there is enough room after the author-column inset. */
@media (min-width: 1041px) {
  .social-card .social-embed-card {
    grid-template-columns: 118px minmax(0, 1fr) 112px !important;
  }
}

/* When the main column is narrowed by zoom/devtools, keep the embed inside the
   parent by moving CTA to a full-width bottom row. */
@media (max-width: 1180px) {
  .social-card .social-embed-card {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    padding-right: 0 !important;
  }

  .social-card .social-embed-card i {
    position: static !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 12px 12px !important;
  }
}

/* Mobile/tablet: no author-column inset. */
@media (max-width: 820px) {
  .social-card .social-post-body,
  .social-card .social-embed-card,
  .social-card .image-grid-embed,
  .social-card .social-card-actions,
  .social-card .social-comments-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R6.6 — embed text rules
   R6.5 fixed parent/card overflow. This pass gives the text inside attachment
   cards its own rules so title/summary/meta do not collapse into a narrow
   unreadable column.
------------------------------------------------------------------------- */

/* The CTA no longer consumes its own grid column. That restores horizontal text
   space while preserving the target-style bottom-right button. */
.social-card .social-embed-card {
  grid-template-columns: 118px minmax(0, 1fr) !important;
  padding-right: 0 !important;
  min-height: 132px !important;
  max-height: none !important;
}

/* Give text a dedicated content well independent of the icon and CTA. */
.social-card .social-embed-card > div {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 18px 18px 42px 16px !important;
  overflow: hidden !important;
}

/* Source/category label stays compact and does not steal title space. */
.social-card .social-embed-card > div > em {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
  letter-spacing: 1px !important;
}

/* Title gets independent line rules. It may wrap, but it should not become
   the tiny stacked/truncated column seen in validation. */
.social-card .social-embed-card > div > strong {
  display: -webkit-box !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: 17px !important;
  line-height: 1.14 !important;
  letter-spacing: -.1px !important;
}

/* Summary gets its own clamp instead of inheriting the title behavior. */
.social-card .social-embed-card > div > p {
  display: -webkit-box !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: 12px !important;
  line-height: 1.34 !important;
}

/* Metadata remains visible but never wraps into multiple compressed rows. */
.social-card .social-embed-card > div > small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/* Button is contained inside the attachment card but independent of text width. */
.social-card .social-embed-card > i {
  position: absolute !important;
  right: 14px !important;
  bottom: 12px !important;
  z-index: 3 !important;
  width: auto !important;
  min-width: 102px !important;
  max-width: 132px !important;
  height: 29px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* The prior narrow-width repair moved the CTA to a full bottom row too early.
   Keep that behavior only once the viewport is genuinely compact. */
@media (min-width: 821px) {
  .social-card .social-embed-card > i {
    grid-column: auto !important;
    justify-self: auto !important;
  }
}

@media (max-width: 980px) {
  .social-card .social-embed-card {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }

  .social-card .social-embed-card > div {
    padding: 16px 14px 46px 14px !important;
  }

  .social-card .social-embed-card > i {
    position: absolute !important;
    right: 12px !important;
    bottom: 11px !important;
    min-width: 96px !important;
  }

  .social-card .social-embed-card > div > strong {
    font-size: 16px !important;
    -webkit-line-clamp: 3 !important;
  }
}

@media (max-width: 820px) {
  .social-card .social-embed-card {
    grid-template-columns: 1fr !important;
  }

  .social-card .social-embed-card > div {
    padding: 14px 14px 50px !important;
  }

  .social-card .social-embed-card > i {
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R7 — mobile polish + final validation pass
   Goal: keep the desktop target intact while making De Tectis usable on tablet,
   mobile, and narrow/devtools validation widths.
------------------------------------------------------------------------- */

/* Final guard: the page should never create horizontal browser overflow. */
html:has(body.reports-social-page),
body.reports-social-page {
  max-width: 100vw;
  overflow-x: hidden;
}

body.reports-social-page * {
  box-sizing: border-box;
}

/* Tablet / narrowed browser: keep sidebar + feed first, then put rail below
   as a dense two-column context grid. */
@media (max-width: 1130px) {
  .coalition-social-shell {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: var(--social-sidebar) minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 0 14px 74px 0 !important;
  }

  .coalition-social-main {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .coalition-social-rail {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 10px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .coalition-social-rail .social-rail-panel {
    min-width: 0 !important;
  }

  .social-utility-bar {
    position: static !important;
    width: 100% !important;
    grid-template-columns: minmax(180px, 1fr) 34px 34px minmax(140px, 172px) !important;
  }

  .social-header {
    margin-bottom: 14px !important;
  }

  .social-feed-controls {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
}

/* Compact tablets: reduce gutters and ensure cards stay readable. */
@media (max-width: 940px) {
  .coalition-social-shell {
    --social-sidebar: 118px;
    gap: 10px !important;
    padding-right: 10px !important;
  }

  .social-sidebar {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .social-logo-mark {
    width: 86px !important;
  }

  .social-nav a {
    min-height: 36px !important;
    padding: 8px 9px !important;
    font-size: 9px !important;
    letter-spacing: 1.2px !important;
  }

  .social-title-wrap h1 {
    font-size: clamp(26px, 5vw, 36px) !important;
    letter-spacing: clamp(5px, 1.8vw, 9px) !important;
  }

  .social-title-wrap p {
    font-size: 9px !important;
    letter-spacing: 2.6px !important;
  }

  .social-composer,
  .social-feed-controls,
  .social-card {
    border-radius: 10px !important;
  }
}

/* Phone layout: single column page, sidebar becomes a compact top rail, right
   rail flows beneath the feed. */
@media (max-width: 820px) {
  .coalition-social-shell {
    grid-template-columns: 1fr !important;
    padding: 0 12px 76px !important;
    gap: 12px !important;
  }

  .social-sidebar,
  .coalition-social-main,
  .coalition-social-rail {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .social-sidebar {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px 14px !important;
    align-items: start !important;
    padding: 14px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(159,230,83,.16) !important;
    border-radius: 0 0 14px 14px !important;
    overflow: visible !important;
  }

  .social-logo {
    align-items: flex-start !important;
    margin: 0 !important;
  }

  .social-logo-mark {
    width: 76px !important;
  }

  .social-logo-title {
    font-size: 15px !important;
    letter-spacing: 4px !important;
  }

  .social-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-content: start !important;
  }

  .social-nav a {
    min-height: 34px !important;
    padding: 8px 7px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 8px !important;
    letter-spacing: 1px !important;
  }

  .social-nav a span:first-child {
    display: none !important;
  }

  .sidebar-status-card,
  .sidebar-quote-card {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  .social-utility-bar {
    grid-template-columns: 1fr 34px 34px !important;
    gap: 7px !important;
  }

  .social-user-pill {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  .social-title-wrap {
    padding: 10px 0 4px !important;
  }

  .social-title-wrap h1 {
    font-size: clamp(25px, 8vw, 34px) !important;
    letter-spacing: clamp(5px, 2.4vw, 9px) !important;
  }

  .social-title-wrap p {
    font-size: 8px !important;
    letter-spacing: 2px !important;
    line-height: 1.45 !important;
  }

  .social-composer-form {
    display: grid !important;
  }

  .composer-input-row {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .composer-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  .composer-textarea {
    min-height: 64px !important;
    font-size: 15px !important;
  }

  .composer-mode-tabs {
    overflow-x: auto !important;
    display: flex !important;
    gap: 8px !important;
    padding-bottom: 3px !important;
  }

  .composer-mode-tabs button {
    min-width: max-content !important;
    min-height: 36px !important;
  }

  .composer-submit-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .composer-submit-row button[type="submit"] {
    width: 100% !important;
    min-height: 42px !important;
  }

  .social-feed-controls {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .social-tabset {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }

  .social-tabset a {
    min-width: max-content !important;
  }

  .feed-sort-controls {
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr 42px !important;
  }

  .feed-sort-controls button {
    min-height: 40px !important;
  }

  .social-card {
    padding: 14px !important;
  }

  .social-card-menu {
    top: 12px !important;
    right: 12px !important;
  }

  .social-post-meta {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .social-post-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  .social-post-body {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .social-card .social-embed-card,
  .social-card .image-grid-embed,
  .social-card .social-card-actions,
  .social-card .social-comments-panel {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .social-card-actions {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }

  .social-card-actions button,
  .social-card-actions a {
    min-height: 38px !important;
    justify-content: center !important;
  }

  .coalition-social-rail {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-bottom: 6px !important;
  }

  .social-rail-panel {
    padding: 14px !important;
  }
}

/* Narrow phones: tighter text, simpler cards, no clipping. */
@media (max-width: 560px) {
  .coalition-social-shell {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .social-sidebar {
    grid-template-columns: 1fr !important;
  }

  .social-logo {
    align-items: center !important;
  }

  .social-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .social-title-wrap h1 {
    font-size: 24px !important;
    letter-spacing: 5px !important;
  }

  .social-title-wrap p {
    letter-spacing: 1.4px !important;
  }

  .composer-input-row {
    grid-template-columns: 1fr !important;
  }

  .composer-avatar {
    display: none !important;
  }

  .composer-attachment-fields {
    grid-template-columns: 1fr !important;
  }

  .composer-picker-bar,
  .composer-attachment-picker {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .social-card .social-embed-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .social-card .social-embed-card .embed-icon {
    width: 100% !important;
    min-width: 0 !important;
    height: 92px !important;
    min-height: 92px !important;
  }

  .social-card .social-embed-card > div {
    padding: 13px 13px 52px !important;
  }

  .social-card .social-embed-card > div > strong {
    font-size: 16px !important;
    -webkit-line-clamp: 3 !important;
  }

  .social-comment-form {
    grid-template-columns: 1fr !important;
  }

  .trending-topic-row,
  .active-node-row {
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
  }
}

/* Final polish: accessible tap targets without changing desktop visuals. */
@media (hover: none) and (pointer: coarse) {
  button,
  .social-nav a,
  .social-tabset a,
  .social-card-actions a,
  .social-card-actions button,
  .rail-title-row a,
  .suggested-researcher-row button {
    min-height: 40px;
  }
}

/* Reduce motion users keep the interface without animation drift. */
@media (prefers-reduced-motion: reduce) {
  body.reports-social-page *,
  body.reports-social-page *::before,
  body.reports-social-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R7.1 — static mobile hamburger navigation
   The expanded mobile top-rail nav broke immersion. Mobile now uses a static,
   non-sticky, CSS-only hamburger menu. Desktop sidebar remains unchanged.
------------------------------------------------------------------------- */

.mobile-nav-toggle,
.mobile-nav-button {
  display: none;
}

.mobile-nav-head {
  display: contents;
}

@media (max-width: 820px) {
  .mobile-nav-toggle {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .social-sidebar {
    position: static !important;
    top: auto !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 12px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .mobile-nav-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .mobile-nav-head .social-logo {
    display: grid !important;
    grid-template-columns: 70px minmax(0, auto) !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: start !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .mobile-nav-head .social-logo-mark {
    width: 70px !important;
    margin: 0 !important;
  }

  .mobile-nav-head .social-logo strong {
    font-size: 15px !important;
    letter-spacing: 4px !important;
    white-space: nowrap !important;
  }

  .mobile-nav-button {
    display: inline-grid !important;
    grid-template-columns: 22px auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(159,230,83,.34) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(11,27,18,.82), rgba(3,9,8,.82)) !important;
    color: var(--social-green) !important;
    font-family: "Rajdhani", "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  .mobile-nav-button span,
  .mobile-nav-button span::before,
  .mobile-nav-button span::after {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--social-green) !important;
    box-shadow: 0 0 10px rgba(159,230,83,.28) !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .mobile-nav-button span {
    position: relative !important;
  }

  .mobile-nav-button span::before,
  .mobile-nav-button span::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
  }

  .mobile-nav-button span::before {
    top: -6px !important;
  }

  .mobile-nav-button span::after {
    top: 6px !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .mobile-nav-button span {
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .mobile-nav-button span::before {
    transform: translateY(6px) rotate(45deg) !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .mobile-nav-button span::after {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  /* Hidden by default on mobile, visible only when hamburger is opened. */
  .mobile-nav-toggle:not(:checked) + .social-sidebar .social-nav,
  .mobile-nav-toggle:not(:checked) + .social-sidebar .sidebar-status-card,
  .mobile-nav-toggle:not(:checked) + .social-sidebar .sidebar-quote-card {
    display: none !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(159,230,83,.14) !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav a {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    justify-content: start !important;
    text-align: left !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav a span:first-child {
    display: inline-grid !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .sidebar-status-card,
  .mobile-nav-toggle:checked + .social-sidebar .sidebar-quote-card {
    display: block !important;
    margin-top: 10px !important;
  }

  .coalition-social-main {
    padding-top: 8px !important;
  }
}

@media (max-width: 560px) {
  .mobile-nav-head .social-logo {
    grid-template-columns: 58px minmax(0, auto) !important;
  }

  .mobile-nav-head .social-logo-mark {
    width: 58px !important;
  }

  .mobile-nav-head .social-logo strong {
    font-size: 13px !important;
    letter-spacing: 3px !important;
  }

  .mobile-nav-button {
    min-height: 36px !important;
    padding: 0 10px !important;
  }

  .mobile-nav-button em {
    display: none !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav {
    grid-template-columns: 1fr !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R8 — utility popovers + post menus
   Adds real interface affordances for the top utility buttons and per-post
   menus without requiring new database tables.
------------------------------------------------------------------------- */

.social-utility-bar {
  position: relative;
  z-index: 30;
}

.social-account-cluster button.is-open,
.social-icon-button.is-open {
  border-color: rgba(159,230,83,.64) !important;
  box-shadow: 0 0 0 1px rgba(159,230,83,.18), 0 0 26px rgba(159,230,83,.10) !important;
}

.social-utility-popovers {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 40px));
  z-index: 45;
  pointer-events: none;
}

.social-popover {
  pointer-events: auto;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(6,18,18,.96), rgba(2,8,9,.94)),
    radial-gradient(circle at 12% 0%, rgba(159,230,83,.10), transparent 42%);
  box-shadow: 0 24px 64px rgba(0,0,0,.58);
  padding: 10px;
  backdrop-filter: blur(18px);
}

.social-popover[hidden] {
  display: none !important;
}

.social-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(139,190,71,.12);
  margin-bottom: 8px;
}

.social-popover-head strong {
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.social-popover-head button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(139,190,71,.24);
  border-radius: 50%;
  background: rgba(2,8,8,.82);
  color: var(--social-soft);
}

.social-popover-row,
.social-popover-account {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px;
  border-radius: 10px;
  color: var(--social-text);
  text-decoration: none;
}

.social-popover-row:hover {
  background: rgba(159,230,83,.07);
}

.social-popover-row > span,
.social-popover-account > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(159,230,83,.28);
  border-radius: 10px;
  background: rgba(159,230,83,.06);
  color: var(--social-green);
  font-weight: 900;
  font-size: 12px;
}

.social-popover-row strong,
.social-popover-account strong {
  display: block;
  overflow: hidden;
  color: var(--social-text);
  font-size: 13px;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-popover-row em,
.social-popover-account em {
  display: block;
  overflow: hidden;
  color: var(--social-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-popover-action {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  border: 1px solid rgba(159,230,83,.26);
  border-radius: 999px;
  background: rgba(159,230,83,.06);
  color: var(--social-green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.post-menu-popover {
  position: absolute;
  top: 48px;
  right: 18px;
  z-index: 35;
  display: grid;
  gap: 4px;
  min-width: 184px;
  padding: 8px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(6,18,18,.97), rgba(2,8,9,.95));
  box-shadow: 0 18px 44px rgba(0,0,0,.52);
}

.post-menu-popover button {
  display: flex;
  align-items: center;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--social-soft);
  padding: 0 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
}

.post-menu-popover button:hover {
  background: rgba(159,230,83,.08);
  color: var(--social-green);
}

@media (max-width: 820px) {
  .social-utility-popovers {
    position: fixed;
    top: 82px;
    left: 12px;
    right: 12px;
    width: auto;
    z-index: 80;
  }

  .post-menu-popover {
    right: 12px;
    left: 12px;
    width: auto;
  }
}


/* -------------------------------------------------------------------------
   Phase R9 — reports-to-messages bridge polish
   The messages.php branch now matches De Tectis. This pass tightens the bridge
   from reports.php so the transition feels intentional, not abrupt.
------------------------------------------------------------------------- */

.social-popover-messages {
  border-color: rgba(159,230,83,.32);
}

.social-popover-bridge-kicker {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid rgba(159,230,83,.16);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(159,230,83,.08), transparent 78%),
    rgba(2,8,9,.46);
}

.social-popover-bridge-kicker span {
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.social-popover-bridge-kicker b {
  color: var(--social-soft);
  font-size: 11px;
  line-height: 1.35;
}

.social-popover-row[data-de-tectis-bridge="messages"],
.social-popover-row[data-de-tectis-floater-open] {
  position: relative;
}

.social-popover-row[data-de-tectis-bridge="messages"],
.social-popover-row[data-de-tectis-floater-open]::after {
  content: "↗";
  color: rgba(159,230,83,.68);
  font-size: 12px;
  font-weight: 900;
}

.social-popover-row[data-de-tectis-bridge="messages"],
.social-popover-row[data-de-tectis-floater-open]:hover {
  border-color: rgba(159,230,83,.18);
  box-shadow: inset 3px 0 0 rgba(159,230,83,.38);
}

.social-message-bridge-row {
  border: 1px solid rgba(159,230,83,.20);
  background: rgba(159,230,83,.055);
}

.social-popover-link-action {
  display: grid;
  place-items: center;
  text-decoration: none;
  line-height: 1;
}

.de-tectis-bridge-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(159,230,83,.14), transparent 38%),
    rgba(0,0,0,.66);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.de-tectis-bridge-overlay[hidden] {
  display: none !important;
}

.de-tectis-bridge-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.de-tectis-bridge-overlay > div {
  width: min(360px, calc(100vw - 40px));
  border: 1px solid rgba(159,230,83,.30);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(159,230,83,.10), transparent 42%),
    linear-gradient(180deg, rgba(6,18,18,.97), rgba(2,8,9,.96));
  box-shadow: 0 34px 90px rgba(0,0,0,.68);
  padding: 22px;
  text-align: center;
}

.de-tectis-bridge-overlay span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border: 1px solid rgba(159,230,83,.32);
  border-radius: 50%;
  color: var(--social-green);
  font-size: 24px;
  box-shadow: 0 0 32px rgba(159,230,83,.08);
}

.de-tectis-bridge-overlay strong {
  display: block;
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.de-tectis-bridge-overlay em {
  display: block;
  margin-top: 7px;
  color: var(--social-soft);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .social-popover-row[data-de-tectis-bridge="messages"],
.social-popover-row[data-de-tectis-floater-open]::after {
    display: none;
  }

  .de-tectis-bridge-overlay > div {
    width: calc(100vw - 28px);
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .de-tectis-bridge-overlay {
    transition: none;
  }
}


/* -------------------------------------------------------------------------
   Phase R9.1 — live messages popover repair
   Fixes the messages dropdown so it populates with real conversation data from
   the existing message floater API instead of hard-coded placeholder rows.
------------------------------------------------------------------------- */

.social-popover-head {
  gap: 8px;
}

.social-popover-head strong {
  margin-right: auto;
}

.social-popover-refresh {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(139,190,71,.24);
  border-radius: 50%;
  background: rgba(2,8,8,.82);
  color: var(--social-soft);
  font-size: 13px;
  cursor: pointer;
}

.social-popover-refresh:hover {
  border-color: rgba(159,230,83,.42);
  color: var(--social-green);
}

.social-popover-bridge-kicker span[data-state="syncing"] {
  color: #d7ff8f;
}

.social-popover-bridge-kicker span[data-state="unread"] {
  color: var(--social-green);
}

.social-popover-bridge-kicker span[data-state="warn"] {
  color: #ffd36a;
}

.social-popover-bridge-kicker span[data-state="empty"] {
  color: rgba(194,206,193,.82);
}

.social-message-popover-list {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.social-message-popover-list.is-loading {
  opacity: .78;
}

.social-message-popover-loading,
.social-message-popover-empty {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(159,230,83,.14);
  border-radius: 10px;
  background: rgba(2,8,9,.42);
  color: var(--social-muted);
  font-size: 12px;
  line-height: 1.45;
}

.social-message-popover-empty {
  display: grid;
  gap: 5px;
  text-align: left;
}

.social-message-popover-empty span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 10px;
  color: var(--social-green);
}

.social-message-popover-empty strong {
  color: var(--social-soft);
  font-size: 13px;
}

.social-message-popover-empty em {
  color: var(--social-muted);
  font-size: 11px;
  font-style: normal;
}

.social-message-popover-empty.is-error span {
  color: #ffd36a;
  border-color: rgba(255,211,106,.28);
}

.social-message-live-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.social-message-live-row small {
  color: var(--social-muted);
  font-size: 10px;
  white-space: nowrap;
}

.social-message-live-row strong i {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--social-green);
  color: #061008;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.social-message-live-row.has-unread {
  border: 1px solid rgba(159,230,83,.24);
  background: rgba(159,230,83,.075);
}

.social-message-live-row.has-unread span {
  box-shadow: 0 0 16px rgba(159,230,83,.13);
}

@media (max-width: 560px) {
  .social-message-live-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .social-message-live-row small {
    grid-column: 2;
  }
}


/* -------------------------------------------------------------------------
   Phase R9.2 — inline De Tectis message floater handoff
   Keeps users on reports.php while opening a separate De Tectis-themed private
   message floater. This does not use or modify the main forum floater.
------------------------------------------------------------------------- */

body.dt-message-floater-open {
  overflow: hidden;
}

.social-popover-row[data-de-tectis-floater-open] {
  cursor: pointer;
}

.social-popover-row[data-de-tectis-floater-open]::after {
  content: "◱";
  color: rgba(159,230,83,.72);
  font-size: 12px;
  font-weight: 900;
}

.social-popover-link-action[data-de-tectis-bridge="messages"]::after {
  content: "";
}


/* -------------------------------------------------------------------------
   Phase R10 — notification / mention layer
   Adds a stronger De Tectis alerts surface and local @mention detection for
   posts without requiring new SQL.
------------------------------------------------------------------------- */

.social-popover-notifications {
  border-color: rgba(159,230,83,.30);
}

.social-notification-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 9px;
  padding: 6px;
  border: 1px solid rgba(159,230,83,.14);
  border-radius: 999px;
  background: rgba(2,8,9,.42);
}

.social-notification-tabs button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--social-muted);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.social-notification-tabs button.active,
.social-notification-tabs button:hover {
  border-color: rgba(159,230,83,.34);
  background: rgba(159,230,83,.085);
  color: var(--social-green);
}

.social-notification-list {
  display: grid;
  gap: 6px;
}

.social-notification-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.social-notification-row small {
  color: var(--social-muted);
  font-size: 10px;
  white-space: nowrap;
}

.social-popover-notifications.notifications-read .social-notification-row {
  opacity: .58;
}

.social-popover-notifications.notifications-read .social-notification-row:first-child {
  opacity: .82;
}

.composer-mention-preview {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: -4px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(159,230,83,.18);
  border-radius: 999px;
  background: rgba(159,230,83,.055);
}

.composer-mention-preview[hidden] {
  display: none !important;
}

.composer-mention-preview strong {
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.composer-mention-preview span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.composer-mention-preview button {
  min-height: 24px;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 999px;
  background: rgba(2,8,9,.54);
  color: var(--social-soft);
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
}

.composer-mention-preview button:hover {
  border-color: rgba(159,230,83,.44);
  color: var(--social-green);
}

@media (max-width: 820px) {
  .composer-mention-preview {
    grid-column: 1 / -1;
    border-radius: 12px;
    grid-template-columns: 1fr;
  }

  .social-notification-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .social-notification-row small {
    grid-column: 2;
  }
}


/* -------------------------------------------------------------------------
   Phase R10.1 — notification badge clear hotfix
   Ensures Mark All Read clears the red alert dot and keeps it cleared for the
   current tab session.
------------------------------------------------------------------------- */

.social-icon-button[data-notification-read="1"]::after,
.notification-button[data-notification-read="1"]::after,
.social-icon-button:not(.has-alert)[aria-label="Notifications read"]::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

#de_tectis_notifications_panel.notifications-read .social-notification-row,
#de_tectis_notifications_panel[data-notification-read="1"] .social-notification-row,
#de_tectis_notifications_panel.notifications-read .social-popover-row,
#de_tectis_notifications_panel[data-notification-read="1"] .social-popover-row {
  opacity: .62;
}

#de_tectis_notifications_panel.notifications-read .social-popover-action,
#de_tectis_notifications_panel[data-notification-read="1"] .social-popover-action {
  border-color: rgba(159,230,83,.18);
  color: rgba(194,206,193,.72);
}


/* -------------------------------------------------------------------------
   Phase R11 — profile identity + follow graph bridge
   Adds an in-page researcher identity bridge and local follow graph behavior.
------------------------------------------------------------------------- */

.profile-bridge-button {
  align-self: start;
  min-height: 30px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 999px;
  background: rgba(159,230,83,.055);
  color: var(--social-green);
  padding: 0 10px;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.profile-bridge-button:hover {
  border-color: rgba(159,230,83,.44);
  background: rgba(159,230,83,.11);
}

.suggested-researcher-row[data-profile-bridge-open] {
  cursor: pointer;
}

.follow-bridge-button.is-following,
.profile-follow-action.is-following {
  border-color: rgba(159,230,83,.52) !important;
  background: rgba(159,230,83,.15) !important;
  color: var(--social-green) !important;
}

body.profile-bridge-open {
  overflow: hidden;
}

.profile-bridge-overlay {
  position: fixed;
  inset: 0;
  z-index: 970;
  display: grid;
  place-items: center;
  padding: 20px;
}

.profile-bridge-overlay[hidden] {
  display: none !important;
}

.profile-bridge-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(159,230,83,.11), transparent 38%),
    rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}

.profile-bridge-panel {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 34px));
  border: 1px solid rgba(159,230,83,.30);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 0%, rgba(159,230,83,.10), transparent 44%),
    linear-gradient(180deg, rgba(7,18,19,.98), rgba(1,7,8,.97));
  box-shadow: 0 34px 92px rgba(0,0,0,.72);
  overflow: hidden;
}

.profile-bridge-panel header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  gap: 13px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(159,230,83,.15);
}

.profile-bridge-panel header > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(159,230,83,.28);
  border-radius: 50%;
  background: rgba(159,230,83,.07);
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 24px;
  font-weight: 900;
}

.profile-bridge-panel small,
.profile-bridge-panel h2,
.profile-bridge-panel p {
  margin: 0;
}

.profile-bridge-panel small {
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.profile-bridge-panel h2 {
  overflow: hidden;
  color: var(--social-text);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-bridge-panel header p {
  color: var(--social-muted);
  font-size: 12px;
}

.profile-bridge-panel header button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 50%;
  background: rgba(2,8,9,.72);
  color: var(--social-soft);
  font-size: 18px;
}

.profile-bridge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 13px 16px 0;
}

.profile-bridge-meta b {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  border: 1px solid rgba(159,230,83,.20);
  border-radius: 999px;
  background: rgba(159,230,83,.055);
  color: var(--social-green);
  padding: 0 10px;
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.profile-bridge-graph {
  display: grid;
  grid-template-columns: 42px 1fr 42px 1fr 42px;
  gap: 8px;
  align-items: center;
  padding: 18px 28px 10px;
}

.profile-bridge-graph span {
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(159,230,83,.28);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(159,230,83,.22), transparent 32%),
    rgba(159,230,83,.04);
  box-shadow: 0 0 28px rgba(159,230,83,.05);
}

.profile-bridge-graph i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(159,230,83,.18), rgba(159,230,83,.54), rgba(159,230,83,.18));
}

.profile-bridge-copy {
  padding: 0 18px 16px;
  color: var(--social-soft);
  font-size: 12px;
  line-height: 1.5;
}

.profile-bridge-panel footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 13px 16px 16px;
  border-top: 1px solid rgba(159,230,83,.12);
}

.profile-bridge-panel footer button,
.profile-bridge-panel footer a {
  display: grid;
  place-items: center;
  min-height: 36px;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 999px;
  background: rgba(159,230,83,.065);
  color: var(--social-green);
  text-decoration: none;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.profile-bridge-panel footer a:hover,
.profile-bridge-panel footer button:hover {
  border-color: rgba(159,230,83,.48);
  background: rgba(159,230,83,.12);
}

@media (max-width: 560px) {
  .profile-bridge-panel header {
    grid-template-columns: 48px minmax(0, 1fr) 32px;
  }

  .profile-bridge-panel header > span {
    width: 48px;
    height: 48px;
  }

  .profile-bridge-panel footer {
    grid-template-columns: 1fr;
  }

  .profile-bridge-graph {
    grid-template-columns: 34px 1fr 34px 1fr 34px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .profile-bridge-graph span {
    width: 34px;
    height: 34px;
  }
}


/* -------------------------------------------------------------------------
   Phase R12 — final QA / closeout hardening
   Final non-destructive pass for the De Tectis reports.php branch.
------------------------------------------------------------------------- */

html.de-tectis-r12-ready .coalition-social-body {
  min-height: 100vh;
}

.coalition-social-body[data-de-tectis-phase="R12"] {
  overflow-x: hidden;
}

.de-tectis-qa-panel {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1200;
  display: grid;
  gap: 4px;
  max-width: min(320px, calc(100vw - 36px));
  border: 1px solid rgba(159,230,83,.30);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0 0, rgba(159,230,83,.10), transparent 42%),
    linear-gradient(180deg, rgba(6,18,18,.96), rgba(2,8,9,.95));
  box-shadow: 0 18px 48px rgba(0,0,0,.52);
  padding: 12px 14px;
  pointer-events: none;
}

.de-tectis-qa-panel[hidden] {
  display: none !important;
}

.de-tectis-qa-panel strong {
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.de-tectis-qa-panel span {
  color: var(--social-soft);
  font-size: 12px;
  line-height: 1.4;
}

.de-tectis-qa-panel.is-warn {
  border-color: rgba(255,211,106,.36);
}

.de-tectis-qa-panel.is-warn strong {
  color: #ffd36a;
}

/* Final overlay order registry. */
.de-tectis-bridge-overlay {
  z-index: 960;
}

.profile-bridge-overlay {
  z-index: 970;
}

.dt-message-floater {
  z-index: 980;
}

.social-r1-toast {
  z-index: 1250;
}

/* Final mobile defensive guard. */
@media (max-width: 820px) {
  .coalition-social-body[data-de-tectis-phase="R12"] .coalition-social-shell,
  .coalition-social-body[data-de-tectis-phase="R12"] .coalition-social-main,
  .coalition-social-body[data-de-tectis-phase="R12"] .coalition-social-rail {
    max-width: 100%;
  }

  .de-tectis-qa-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .de-tectis-qa-panel,
  .de-tectis-qa-panel * {
    transition: none !important;
    animation: none !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R13 — persistent follow graph
   Adds persistent follow/unfollow behavior through social-profile-action.php.
------------------------------------------------------------------------- */

.profile-follow-action[aria-pressed="true"],
.follow-bridge-button[aria-pressed="true"] {
  border-color: rgba(159,230,83,.58) !important;
  background: rgba(159,230,83,.16) !important;
  color: var(--social-green) !important;
  box-shadow: 0 0 0 1px rgba(159,230,83,.10), 0 0 24px rgba(159,230,83,.08);
}

.profile-bridge-panel[data-follow-persisted="1"] footer {
  border-top-color: rgba(159,230,83,.22);
}


/* -------------------------------------------------------------------------
   Phase R14 — persistent notifications + mentions
   Adds SQL-backed notification/mention behavior while retaining local fallback.
------------------------------------------------------------------------- */

.social-notification-row.is-unread {
  border: 1px solid rgba(159,230,83,.24);
  background: rgba(159,230,83,.075);
}

.social-notification-row.is-read {
  opacity: .62;
}

.social-notification-empty {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(159,230,83,.14);
  border-radius: 10px;
  background: rgba(2,8,9,.42);
}

.social-notification-empty span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 10px;
  color: var(--social-green);
}

.social-notification-empty strong {
  color: var(--social-soft);
  font-size: 13px;
}

.social-notification-empty em {
  color: var(--social-muted);
  font-size: 11px;
  font-style: normal;
}


/* -------------------------------------------------------------------------
   Phase R15 — moderation / watchlist / mute routing
   Wires post overflow menu actions to persistent moderation routing.
------------------------------------------------------------------------- */

.social-card.is-watchlisted {
  box-shadow: inset 0 0 0 1px rgba(159,230,83,.18), 0 0 30px rgba(159,230,83,.045);
}

.social-card.is-watchlisted::before {
  content: "WATCHLISTED";
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 22px;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 999px;
  background: rgba(2,8,9,.76);
  color: var(--social-green);
  padding: 0 9px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.social-card.is-muted-source {
  opacity: .55;
  filter: saturate(.68);
}

.social-card.is-reported-post {
  border-color: rgba(255,211,106,.34);
}

.social-card.is-reported-post::before {
  content: "REPORTED";
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 22px;
  border: 1px solid rgba(255,211,106,.28);
  border-radius: 999px;
  background: rgba(20,12,2,.76);
  color: #ffd36a;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.post-menu-popover button[data-post-menu-action="Save to watchlist"]::before {
  content: "⌑";
  margin-right: 8px;
}

.post-menu-popover button[data-post-menu-action="Mute this source"]::before {
  content: "⊘";
  margin-right: 8px;
}

.post-menu-popover button[data-post-menu-action="Report post"]::before {
  content: "⚑";
  margin-right: 8px;
}

@media (max-width: 560px) {
  .social-card.is-watchlisted::before,
  .social-card.is-reported-post::before {
    right: 12px;
    top: 12px;
  }
}


/* -------------------------------------------------------------------------
   Phase R15.1 — admin-only moderation + remove watchlist hotfix
   Hides moderation menus from non-admin users and adds remove-from-watchlist.
------------------------------------------------------------------------- */

body[data-de-tectis-admin="0"] .post-menu,
body[data-de-tectis-admin="0"] .post-menu-popover {
  display: none !important;
}

.post-menu-popover button[data-post-menu-action="Remove from watchlist"]::before {
  content: "−";
  margin-right: 8px;
}

.social-card:not(.is-watchlisted)::before {
  /* keep generated labels limited to active card states */
}

.social-card.is-watchlisted .post-menu {
  border-color: rgba(159,230,83,.36);
}


/* -------------------------------------------------------------------------
   Phase R15.2 — watchlist persistence-on-refresh hotfix
   Restores active watchlist state from DB/local fallback after page refresh.
------------------------------------------------------------------------- */

.social-card[data-watchlisted="1"] {
  box-shadow: inset 0 0 0 1px rgba(159,230,83,.18), 0 0 30px rgba(159,230,83,.045);
}

.social-card[data-watchlisted="1"]::before {
  content: "WATCHLISTED";
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 22px;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 999px;
  background: rgba(2,8,9,.76);
  color: var(--social-green);
  padding: 0 9px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.post-menu-popover button[data-post-menu-action="Remove from watchlist"] {
  color: var(--social-green);
}


/* -------------------------------------------------------------------------
   Phase R15.3 — watchlist loader scope hotfix
   The R15.2 loader was appended outside the main reports-social closure, so it
   could not reach loadPersistentWatchlistState(). This phase binds the refresh
   inside the active scope and exposes window.DeTectisWatchlist.refresh().
------------------------------------------------------------------------- */

.social-card[data-watchlisted="1"].is-watchlisted::before {
  content: "WATCHLISTED";
}


/* -------------------------------------------------------------------------
   Phase R16 — admin moderation queue console
   Adds an admin-only queue popover for reviewing watchlist, mute, and report
   actions stored in social_moderation_actions.
------------------------------------------------------------------------- */

.moderation-queue-button {
  position: relative;
}

.moderation-queue-button.has-alert::after {
  content: attr(data-moderation-count);
  position: absolute;
  right: -3px;
  top: -5px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border: 1px solid rgba(255,211,106,.36);
  border-radius: 999px;
  background: #ffd36a;
  color: #061008;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 900;
}

.social-popover-moderation {
  width: min(420px, calc(100vw - 30px));
}

.social-moderation-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 9px;
  padding: 6px;
  border: 1px solid rgba(159,230,83,.14);
  border-radius: 14px;
  background: rgba(2,8,9,.42);
}

.social-moderation-tabs button {
  position: relative;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--social-muted);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.social-moderation-tabs button.active,
.social-moderation-tabs button:hover {
  border-color: rgba(159,230,83,.34);
  background: rgba(159,230,83,.085);
  color: var(--social-green);
}

.social-moderation-tabs button::after {
  content: attr(data-count);
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(159,230,83,.12);
  color: var(--social-green);
  font-size: 8px;
}

.social-moderation-list {
  display: grid;
  gap: 7px;
  max-height: min(420px, calc(100vh - 230px));
  overflow: auto;
  scrollbar-width: none;
}

.social-moderation-list::-webkit-scrollbar {
  display: none;
}

.social-moderation-loading,
.social-moderation-empty {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(159,230,83,.14);
  border-radius: 10px;
  background: rgba(2,8,9,.42);
  color: var(--social-muted);
  font-size: 12px;
  line-height: 1.45;
}

.social-moderation-empty {
  display: grid;
  gap: 5px;
}

.social-moderation-empty span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 10px;
  color: var(--social-green);
}

.social-moderation-empty strong {
  color: var(--social-soft);
  font-size: 13px;
}

.social-moderation-empty em {
  color: var(--social-muted);
  font-size: 11px;
  font-style: normal;
}

.social-moderation-empty.is-error span {
  border-color: rgba(255,211,106,.30);
  color: #ffd36a;
}

.social-moderation-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid rgba(159,230,83,.14);
  border-radius: 12px;
  background: rgba(2,8,9,.46);
  padding: 10px;
}

.social-moderation-item > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 10px;
  color: var(--social-green);
  background: rgba(159,230,83,.05);
}

.social-moderation-item div {
  min-width: 0;
}

.social-moderation-item strong,
.social-moderation-item em,
.social-moderation-item p,
.social-moderation-item small {
  display: block;
}

.social-moderation-item strong {
  color: var(--social-soft);
  font-size: 13px;
}

.social-moderation-item em,
.social-moderation-item small {
  color: var(--social-muted);
  font-size: 10px;
  font-style: normal;
}

.social-moderation-item p {
  margin: 5px 0;
  color: var(--social-text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.social-moderation-item nav {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

.social-moderation-item nav button {
  min-height: 30px;
  border: 1px solid rgba(159,230,83,.22);
  border-radius: 999px;
  background: rgba(159,230,83,.055);
  color: var(--social-green);
  padding: 0 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.social-moderation-item.is-resolved {
  opacity: .62;
}

@media (max-width: 560px) {
  .social-moderation-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-moderation-item nav {
    justify-content: stretch;
  }

  .social-moderation-item nav button {
    flex: 1;
  }
}


/* -------------------------------------------------------------------------
   Phase R17 — live feed sync / new transmission banner
   Lightweight polling checks for new transmissions without disrupting the
   active feed or composer.
------------------------------------------------------------------------- */

.live-feed-sync-banner {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 34px;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  border: 1px solid rgba(159,230,83,.28);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(159,230,83,.10), rgba(159,230,83,.035)),
    rgba(2,8,9,.64);
  box-shadow: 0 18px 48px rgba(0,0,0,.20);
  padding: 10px;
}

.live-feed-sync-banner[hidden] {
  display: none !important;
}

.live-feed-sync-banner > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(159,230,83,.28);
  border-radius: 50%;
  color: var(--social-green);
  background: rgba(159,230,83,.06);
}

.live-feed-sync-banner strong,
.live-feed-sync-banner em {
  display: block;
  min-width: 0;
}

.live-feed-sync-banner strong {
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.live-feed-sync-banner em {
  color: var(--social-soft);
  font-size: 11px;
  font-style: normal;
  margin-top: 2px;
}

.live-feed-sync-banner button {
  min-height: 34px;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 999px;
  background: rgba(159,230,83,.07);
  color: var(--social-green);
  padding: 0 12px;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.live-feed-sync-banner button[data-live-feed-sync-dismiss] {
  width: 34px;
  padding: 0;
  color: var(--social-soft);
}

@media (max-width: 680px) {
  .live-feed-sync-banner {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  .live-feed-sync-banner button[data-live-feed-sync-refresh] {
    grid-column: 1 / -1;
  }
}


/* -------------------------------------------------------------------------
   Phase R18 — inline feed refresh
   Upgrades R17 feed sync so Refresh Feed updates the stream in place instead
   of forcing a full page reload.
------------------------------------------------------------------------- */

.social-feed.is-refreshing {
  position: relative;
  min-height: 260px;
  opacity: .68;
  pointer-events: none;
}

.social-feed.is-refreshing::after {
  content: "SYNCING DE TECTIS STREAM…";
  position: absolute;
  inset: 18px;
  z-index: 20;
  display: grid;
  place-items: center;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(159,230,83,.12), transparent 34%),
    rgba(1,7,8,.72);
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  backdrop-filter: blur(3px);
}

.social-feed.just-refreshed {
  animation: deTectisFeedPulse .9s ease;
}

@keyframes deTectisFeedPulse {
  0% {
    box-shadow: 0 0 0 rgba(159,230,83,0);
  }
  35% {
    box-shadow: 0 0 42px rgba(159,230,83,.10);
  }
  100% {
    box-shadow: 0 0 0 rgba(159,230,83,0);
  }
}

.live-feed-sync-banner button[data-live-feed-sync-refresh] {
  min-width: 136px;
}

@media (prefers-reduced-motion: reduce) {
  .social-feed.just-refreshed {
    animation: none;
  }
}


/* -------------------------------------------------------------------------
   Phase R18.1 — own-post delete + resource attachment guard
   Adds author-only delete controls and prevents phantom resource cards.
------------------------------------------------------------------------- */

.post-delete-button {
  align-self: start;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,211,106,.26);
  border-radius: 50%;
  background: rgba(18,8,4,.58);
  color: #ffd36a;
  font-size: 14px;
  cursor: pointer;
}

.post-delete-button:hover {
  border-color: rgba(255,211,106,.52);
  background: rgba(255,211,106,.10);
  color: #ffe7a3;
}

.social-card.is-deleting {
  opacity: .58;
  pointer-events: none;
}

.social-card.is-deleted {
  transform: scale(.985);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}

body.post-delete-open {
  overflow: hidden;
}

.post-delete-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: grid;
  place-items: center;
  padding: 20px;
}

.post-delete-confirm-overlay[hidden] {
  display: none !important;
}

.post-delete-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,211,106,.12), transparent 38%),
    rgba(0,0,0,.64);
  backdrop-filter: blur(6px);
}

.post-delete-confirm-panel {
  position: relative;
  z-index: 1;
  width: min(390px, calc(100vw - 34px));
  border: 1px solid rgba(255,211,106,.34);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,211,106,.10), transparent 42%),
    linear-gradient(180deg, rgba(18,12,6,.98), rgba(2,8,9,.97));
  box-shadow: 0 34px 92px rgba(0,0,0,.74);
  padding: 22px;
  text-align: center;
}

.post-delete-confirm-panel > span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border: 1px solid rgba(255,211,106,.32);
  border-radius: 50%;
  background: rgba(255,211,106,.07);
  color: #ffd36a;
  font-size: 22px;
}

.post-delete-confirm-panel h2 {
  margin: 0;
  color: #ffd36a;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.post-delete-confirm-panel p {
  margin: 10px 0 18px;
  color: var(--social-soft);
  font-size: 12px;
  line-height: 1.5;
}

.post-delete-confirm-panel div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.post-delete-confirm-panel button {
  min-height: 38px;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 999px;
  background: rgba(159,230,83,.055);
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.post-delete-confirm-panel button.danger {
  border-color: rgba(255,95,95,.34);
  background: rgba(255,95,95,.08);
  color: #ff8d8d;
}

@media (max-width: 560px) {
  .post-delete-confirm-panel div {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------------------------------
   Phase R18.2 — trash placement + computer image upload
   Keeps destructive controls out of the interaction bar and enables direct
   image upload for Image-mode posts.
------------------------------------------------------------------------- */

.social-card-header {
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  padding-right: 138px;
}

.post-header-tools {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  z-index: 3;
}

.post-header-tools .profile-bridge-button {
  min-height: 28px;
  padding: 0 9px;
}

.post-header-tools .post-delete-button,
.post-header-tools .post-menu {
  flex: 0 0 auto;
}

.post-delete-button {
  width: 29px;
  height: 28px;
  font-size: 13px;
}

.social-card-actions .post-delete-button,
.social-card-actions [data-post-delete-open] {
  display: none !important;
}

.composer-image-upload-field {
  grid-column: 1 / -1;
}

.composer-image-upload-field[hidden] {
  display: none !important;
}

.composer-image-upload-field input[type="file"] {
  min-height: 40px;
  padding: 8px 10px;
  cursor: pointer;
}

.composer-image-upload-field small {
  display: block;
  color: var(--social-muted);
  font-size: 10px;
  line-height: 1.35;
}

.social-uploaded-image-card {
  display: grid;
  gap: 8px;
  margin-left: 56px;
  border: 1px solid rgba(159,230,83,.20);
  border-radius: 12px;
  background: rgba(2,8,9,.58);
  padding: 10px;
  color: var(--social-text);
  text-decoration: none;
  overflow: hidden;
}

.social-uploaded-image-card img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border: 1px solid rgba(159,230,83,.14);
  border-radius: 9px;
  background: rgba(2,8,9,.78);
}

.social-uploaded-image-card span {
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .social-card-header {
    padding-right: 0;
  }

  .post-header-tools {
    position: static;
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 6px;
  }

  .social-uploaded-image-card {
    margin-left: 0;
  }
}


/* -------------------------------------------------------------------------
   Phase R18.3 — canonical trust badge placement
   Aligns the top-right user trust placement to the canonical target:
   avatar left, username top, Trust value directly beneath username,
   chevron on the far right. Also stabilizes post author badge rows.
------------------------------------------------------------------------- */

/* Top utility user pill: trust belongs under the username, not in its own right-side column. */
.social-user-pill {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 12px !important;
  grid-template-rows: 1fr 1fr !important;
  grid-auto-flow: row !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  padding: 4px 9px 4px 5px !important;
  height: 38px !important;
  min-height: 38px !important;
}

.social-user-pill > span {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

.social-user-pill > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--social-text) !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.social-user-pill > em {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--social-green) !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: .15px !important;
  text-transform: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.social-user-pill > i {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  color: var(--social-green) !important;
}

/* Post cards: preserve canonical author metadata stack and keep trust next to role. */
.author-meta {
  min-width: 0;
}

.author-meta div {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 1px !important;
}

.author-meta b {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 19px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-family: "Rajdhani", "Inter", sans-serif !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .6px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* Make the second author badge read visually as the trust badge without drifting right. */
.author-meta b + b {
  margin-left: 0 !important;
}

/* R18.2 header controls should not push the author trust badges out of place. */
.social-card-header {
  align-items: start !important;
}

.post-header-tools {
  max-width: 138px;
}

/* Responsive correction for the utility cluster where R7 mobile rules stretch the user pill. */
@media (max-width: 1130px) {
  .social-user-pill {
    grid-template-columns: 30px minmax(0, 1fr) 12px !important;
  }
}

@media (max-width: 560px) {
  .social-user-pill {
    min-width: 0 !important;
    width: 100% !important;
  }

  .social-user-pill > strong,
  .social-user-pill > em {
    white-space: nowrap !important;
  }

  .author-meta div {
    gap: 5px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R18.4 — utility cluster canonical target match
   Target extraction from supplied crop:
   - crop: 189x44px
   - icon buttons: ~32x32px
   - icon gaps: ~7–8px
   - user chip: ~112px wide, ~38–40px high
   - chip must sit immediately to the right of the message button
   - admin flag remains visible for admin users and occupies its own icon slot
------------------------------------------------------------------------- */

/* Desktop non-admin canonical order: search | alerts | messages | user chip */
body[data-de-tectis-admin="0"] .social-utility-bar {
  width: 372px !important;
  grid-template-columns: 172px 32px 32px 112px !important;
  gap: 8px !important;
}

body[data-de-tectis-admin="0"] .social-search {
  grid-column: 1 !important;
}

body[data-de-tectis-admin="0"] .notification-button {
  grid-column: 2 !important;
}

body[data-de-tectis-admin="0"] .message-button {
  grid-column: 3 !important;
}

body[data-de-tectis-admin="0"] .social-user-pill {
  grid-column: 4 !important;
}

/* Desktop admin canonical order: search | alerts | flag | messages | user chip */
body[data-de-tectis-admin="1"] .social-utility-bar {
  width: 412px !important;
  grid-template-columns: 172px 32px 32px 32px 112px !important;
  gap: 8px !important;
}

body[data-de-tectis-admin="1"] .social-search {
  grid-column: 1 !important;
}

body[data-de-tectis-admin="1"] .notification-button {
  grid-column: 2 !important;
}

body[data-de-tectis-admin="1"] .moderation-queue-button {
  grid-column: 3 !important;
}

body[data-de-tectis-admin="1"] .message-button {
  grid-column: 4 !important;
}

body[data-de-tectis-admin="1"] .social-user-pill {
  grid-column: 5 !important;
}

/* Canonical icon sizing from target crop. */
.social-utility-bar .social-icon-button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  justify-self: stretch !important;
  align-self: center !important;
}

/* Canonical user chip size and internal placement. */
.social-user-pill {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 10px !important;
  grid-template-rows: 1fr 1fr !important;
  column-gap: 7px !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 4px 7px 4px 5px !important;
  border-radius: 10px !important;
  justify-self: stretch !important;
}

.social-user-pill > span {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 28px !important;
  height: 28px !important;
  align-self: center !important;
  justify-self: center !important;
}

.social-user-pill > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--social-text) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.social-user-pill > em {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--social-green) !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .1px !important;
  text-transform: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.social-user-pill > i {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  font-size: 9px !important;
}

/* Keep popovers anchored under the correct icon after the canonical order change. */
.social-popover-messages,
.social-popover-notifications,
.social-popover-moderation {
  right: 0;
}

/* Tablet: keep the same ordering; only allow the search column to flex. */
@media (max-width: 1130px) {
  body[data-de-tectis-admin="0"] .social-utility-bar {
    width: 100% !important;
    grid-template-columns: minmax(180px, 1fr) 32px 32px 112px !important;
  }

  body[data-de-tectis-admin="1"] .social-utility-bar {
    width: 100% !important;
    grid-template-columns: minmax(180px, 1fr) 32px 32px 32px 112px !important;
  }
}

/* Mobile: stack safely while preserving chip internals. */
@media (max-width: 720px) {
  body[data-de-tectis-admin="0"] .social-utility-bar,
  body[data-de-tectis-admin="1"] .social-utility-bar {
    grid-template-columns: 1fr 32px 32px 32px !important;
    width: 100% !important;
  }

  body[data-de-tectis-admin="0"] .social-search,
  body[data-de-tectis-admin="1"] .social-search {
    grid-column: 1 / -1 !important;
  }

  body[data-de-tectis-admin="0"] .notification-button,
  body[data-de-tectis-admin="1"] .notification-button {
    grid-column: 1 !important;
  }

  body[data-de-tectis-admin="1"] .moderation-queue-button {
    grid-column: 2 !important;
  }

  body[data-de-tectis-admin="0"] .message-button {
    grid-column: 2 !important;
  }

  body[data-de-tectis-admin="1"] .message-button {
    grid-column: 3 !important;
  }

  body[data-de-tectis-admin="0"] .social-user-pill {
    grid-column: 3 / span 2 !important;
  }

  body[data-de-tectis-admin="1"] .social-user-pill {
    grid-column: 4 !important;
  }
}

@media (max-width: 420px) {
  body[data-de-tectis-admin="0"] .social-utility-bar,
  body[data-de-tectis-admin="1"] .social-utility-bar {
    grid-template-columns: 32px 32px 32px minmax(0, 112px) !important;
  }

  body[data-de-tectis-admin="0"] .social-search,
  body[data-de-tectis-admin="1"] .social-search {
    grid-column: 1 / -1 !important;
  }

  body[data-de-tectis-admin="0"] .notification-button,
  body[data-de-tectis-admin="1"] .notification-button {
    grid-column: 1 !important;
  }

  body[data-de-tectis-admin="1"] .moderation-queue-button {
    grid-column: 2 !important;
  }

  body[data-de-tectis-admin="0"] .message-button {
    grid-column: 2 !important;
  }

  body[data-de-tectis-admin="1"] .message-button {
    grid-column: 3 !important;
  }

  body[data-de-tectis-admin="0"] .social-user-pill {
    grid-column: 3 / 5 !important;
    justify-self: end !important;
  }

  body[data-de-tectis-admin="1"] .social-user-pill {
    grid-column: 4 !important;
    justify-self: end !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R18.5 — user chip profile photo
   The canonical chip needs the actual logged-in user's profile photo in the
   avatar cell, not the generic placeholder orb.
------------------------------------------------------------------------- */

.social-user-pill > .social-user-avatar {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(159,230,83,.28) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.20), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(159,230,83,.18), rgba(2,8,9,.86) 68%) !important;
  box-shadow: inset 0 0 16px rgba(159,230,83,.10) !important;
}

.social-user-pill.has-user-avatar > .social-user-avatar {
  background: rgba(2,8,9,.74) !important;
  border-style: solid !important;
}

.social-user-pill > .social-user-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
}

.social-user-pill > .social-user-avatar b {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--social-green) !important;
  font-family: "Rajdhani", "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.social-user-pill.no-user-avatar > .social-user-avatar {
  border-style: dashed !important;
}

.social-user-pill.no-user-avatar > .social-user-avatar::after {
  content: none !important;
}


/* -------------------------------------------------------------------------
   Phase R18.6 — user post profile photos
   Own posts and dynamically inserted posts now use the same profile image as
   the top-right chip instead of the generic placeholder/initial.
------------------------------------------------------------------------- */

.social-avatar {
  overflow: hidden !important;
  border-radius: 50% !important;
  position: relative !important;
}

.social-avatar.has-avatar-image,
.social-avatar:has(img) {
  background: rgba(2,8,9,.72) !important;
}

.social-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
}

.social-avatar.has-avatar-initial {
  display: grid !important;
  place-items: center !important;
  color: var(--social-green) !important;
  font-family: "Rajdhani", "Inter", sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}


/* -------------------------------------------------------------------------
   Phase R18.7 — replace comment text glyph with canonical comment asset
   The feed action bar now uses the uploaded speech-bubble asset so the
   comments control matches the target image more closely.
------------------------------------------------------------------------- */

.social-card-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.social-action-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  vertical-align: middle;
}

.social-action-icon-comment {
  background-color: currentColor;
  -webkit-mask: url("../icons/chat-comment-outline-currentcolor.svg") center / contain no-repeat;
  mask: url("../icons/chat-comment-outline-currentcolor.svg") center / contain no-repeat;
  opacity: .96;
  transform: translateY(0.5px);
}

.social-card-actions button:hover .social-action-icon-comment,
.social-card-actions button.is-active .social-action-icon-comment {
  background-color: currentColor;
}

@media (max-width: 820px) {
  .social-action-icon {
    width: 16px;
    height: 16px;
  }
}


/* -------------------------------------------------------------------------
   Phase R19 — canonical action icon set
   Completes the R18.7 comment-asset direction by replacing the rest of the
   post action row text glyphs with consistent currentColor SVG masks.
------------------------------------------------------------------------- */

.social-card-actions {
  align-items: center !important;
}

.social-card-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.social-card-actions span[data-count] {
  display: inline-block !important;
  min-width: 1ch !important;
  margin-left: 0 !important;
  transform: translateY(.5px);
}

.social-action-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  vertical-align: middle;
  background-color: currentColor;
  opacity: .96;
}

.social-action-icon-comment {
  -webkit-mask: url("../icons/chat-comment-outline-currentcolor.svg") center / contain no-repeat;
  mask: url("../icons/chat-comment-outline-currentcolor.svg") center / contain no-repeat;
  transform: translateY(.5px);
}

.social-action-icon-rebroadcast {
  -webkit-mask: url("../icons/chat-rebroadcast-currentcolor.svg") center / contain no-repeat;
  mask: url("../icons/chat-rebroadcast-currentcolor.svg") center / contain no-repeat;
}

.social-action-icon-signal {
  -webkit-mask: url("../icons/chat-signal-diamond-currentcolor.svg") center / contain no-repeat;
  mask: url("../icons/chat-signal-diamond-currentcolor.svg") center / contain no-repeat;
}

.social-action-icon-bookmark {
  -webkit-mask: url("../icons/chat-bookmark-currentcolor.svg") center / contain no-repeat;
  mask: url("../icons/chat-bookmark-currentcolor.svg") center / contain no-repeat;
}

.social-action-icon-share {
  -webkit-mask: url("../icons/chat-share-currentcolor.svg") center / contain no-repeat;
  mask: url("../icons/chat-share-currentcolor.svg") center / contain no-repeat;
}

.social-card-actions button:hover .social-action-icon,
.social-card-actions button.is-active .social-action-icon,
.social-card-actions .signal-action .social-action-icon {
  background-color: currentColor;
  opacity: 1;
}

@media (max-width: 820px) {
  .social-action-icon {
    width: 16px;
    height: 16px;
  }

  .social-card-actions button {
    gap: 5px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R20 — top utility icon assets
   Replaces the text glyphs inside the notification and message dropdown
   buttons with canonical uploaded SVG assets while preserving the existing
   dropdown behavior, notification badge, admin flag, and R18.4 ordering.
------------------------------------------------------------------------- */

.social-utility-bar .notification-button,
.social-utility-bar .message-button {
  color: var(--social-green) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
}

.social-utility-bar .notification-button::before,
.social-utility-bar .message-button::before {
  content: "" !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  background-color: currentColor !important;
  opacity: .98 !important;
  transform: translateY(.25px);
}

.social-utility-bar .notification-button::before {
  -webkit-mask: url("../icons/de-tectis-bell-icon.svg") center / contain no-repeat;
  mask: url("../icons/de-tectis-bell-icon.svg") center / contain no-repeat;
}

.social-utility-bar .message-button::before {
  -webkit-mask: url("../icons/de-tectis-message-icon.svg") center / contain no-repeat;
  mask: url("../icons/de-tectis-message-icon.svg") center / contain no-repeat;
}

.social-utility-bar .notification-button:hover::before,
.social-utility-bar .message-button:hover::before,
.social-utility-bar .notification-button.is-open::before,
.social-utility-bar .message-button.is-open::before {
  opacity: 1 !important;
}

.social-utility-bar .notification-button.has-alert::after {
  z-index: 2 !important;
}

/* Keep admin flag as implemented; only asset-swap bell/message for R20. */
.social-utility-bar .moderation-queue-button {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Keep the icon asset centered in the R18.4 canonical crop sizes. */
.social-utility-bar .social-icon-button {
  overflow: visible !important;
}

@media (max-width: 820px) {
  .social-utility-bar .notification-button::before,
  .social-utility-bar .message-button::before {
    width: 16px !important;
    height: 16px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R22 — top header + utility cluster responsive hardening
   Uses the R21 viewport matrix to stop the title/search/icon/user-chip band
   from overfitting to one desktop crop. This phase hardens the top header,
   De Tectis title, search field, bell/admin/message controls, and user chip
   across mobile, tablet, desktop, zoom, and wide-display release targets.
------------------------------------------------------------------------- */

.reports-social-page {
  --r22-safe-edge: clamp(10px, 2vw, 28px);
  --r22-utility-icon: 32px;
  --r22-utility-gap: 8px;
  --r22-chip-width: 112px;
  --r22-search-width: 172px;
  --r22-header-max: 1180px;
}

.social-header,
.social-title-wrap,
.social-utility-bar,
.social-search,
.social-user-pill {
  min-width: 0 !important;
}

.social-header {
  isolation: isolate;
}

.social-title-wrap {
  max-width: min(var(--social-feed-width), 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.social-title-wrap h1 {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
  font-size: clamp(25px, 3.15vw, 42px) !important;
  letter-spacing: clamp(5px, 1.1vw, 10px) !important;
}

.social-title-wrap p {
  max-width: 100% !important;
  text-wrap: balance;
  letter-spacing: clamp(1.7px, .52vw, 3.1px) !important;
}

/* Desktop release positioning: anchor the utility cluster to the safe right edge
   instead of a single fixed left offset. */
@media (min-width: 1131px) {
  .social-utility-bar {
    left: auto !important;
    right: max(var(--r22-safe-edge), calc((100vw - var(--r22-header-max)) / 2)) !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    max-width: calc(100vw - (var(--r22-safe-edge) * 2)) !important;
  }

  body[data-de-tectis-admin="0"] .social-utility-bar {
    width: min(372px, calc(100vw - (var(--r22-safe-edge) * 2))) !important;
    grid-template-columns:
      minmax(118px, var(--r22-search-width))
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      var(--r22-chip-width) !important;
  }

  body[data-de-tectis-admin="1"] .social-utility-bar {
    width: min(412px, calc(100vw - (var(--r22-safe-edge) * 2))) !important;
    grid-template-columns:
      minmax(118px, var(--r22-search-width))
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      var(--r22-chip-width) !important;
  }
}

/* Medium/tablet release: keep the canonical order, but let search compress
   before icons or chip drift out of the row. */
@media (max-width: 1130px) {
  .social-utility-bar {
    position: sticky !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    z-index: 16 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  body[data-de-tectis-admin="0"] .social-utility-bar {
    grid-template-columns:
      minmax(130px, 1fr)
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      var(--r22-chip-width) !important;
  }

  body[data-de-tectis-admin="1"] .social-utility-bar {
    grid-template-columns:
      minmax(118px, 1fr)
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      var(--r22-chip-width) !important;
  }

  .social-search {
    width: 100% !important;
    min-width: 0 !important;
  }

  .social-user-pill {
    justify-self: end !important;
  }
}

/* Phone/tablet narrow: search becomes a full top row; icon/chip controls become
   a compact second row that preserves alerts → flag when admin → messages → chip. */
@media (max-width: 720px) {
  .social-header {
    gap: 10px !important;
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }

  .social-utility-bar {
    position: sticky !important;
    top: env(safe-area-inset-top) !important;
    grid-template-rows: 36px 38px !important;
    align-items: center !important;
    padding: 0 !important;
    backdrop-filter: blur(12px);
  }

  body[data-de-tectis-admin="0"] .social-utility-bar {
    grid-template-columns:
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      minmax(104px, var(--r22-chip-width))
      minmax(0, 1fr) !important;
  }

  body[data-de-tectis-admin="1"] .social-utility-bar {
    grid-template-columns:
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      minmax(104px, var(--r22-chip-width)) !important;
  }

  body[data-de-tectis-admin="0"] .social-search,
  body[data-de-tectis-admin="1"] .social-search {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    height: 35px !important;
  }

  body[data-de-tectis-admin="0"] .notification-button,
  body[data-de-tectis-admin="1"] .notification-button {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body[data-de-tectis-admin="1"] .moderation-queue-button {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body[data-de-tectis-admin="0"] .message-button {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body[data-de-tectis-admin="1"] .message-button {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  body[data-de-tectis-admin="0"] .social-user-pill {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  body[data-de-tectis-admin="1"] .social-user-pill {
    grid-column: 4 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }

  .social-title-wrap {
    padding-top: 6px !important;
  }

  .social-title-wrap h1 {
    font-size: clamp(24px, 8vw, 34px) !important;
    letter-spacing: clamp(4px, 1.8vw, 8px) !important;
  }

  .social-title-wrap p {
    font-size: 8px !important;
    line-height: 1.45 !important;
    letter-spacing: clamp(1.4px, 1vw, 2.2px) !important;
  }
}

/* Very narrow release target: no overlap, no horizontal scroll. */
@media (max-width: 360px) {
  .reports-social-page {
    --r22-utility-gap: 6px;
    --r22-chip-width: 106px;
  }

  .social-utility-bar {
    gap: 6px !important;
  }

  .social-user-pill {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    grid-template-columns: 26px minmax(0, 1fr) 9px !important;
    column-gap: 6px !important;
  }

  .social-user-pill > .social-user-avatar,
  .social-user-pill > span {
    width: 26px !important;
    height: 26px !important;
  }
}

/* Wide-display release target: hold the social surface together instead of
   letting the utility cluster drift too far from the product shell. */
@media (min-width: 1920px) {
  .social-utility-bar {
    right: max(28px, calc((100vw - 1440px) / 2)) !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R24 — shared feed density + typography foundation
   Establishes release-safe text rhythm variables and common card/feed rules.
   Desktop and mobile refinements are applied in their split CSS files.
------------------------------------------------------------------------- */

body.reports-social-page {
  --r24-feed-body-size: clamp(13px, .92vw, 15px);
  --r24-feed-meta-size: clamp(10px, .72vw, 12px);
  --r24-feed-line-height: 1.55;
  --r24-card-inner-gap: clamp(10px, 1.1vw, 16px);
}

.social-post-body,
.social-card p,
.social-embed-card p {
  line-height: var(--r24-feed-line-height) !important;
}

.social-post-body {
  overflow-wrap: anywhere !important;
}

.author-meta strong,
.author-meta span,
.social-post-body,
.social-embed-card strong,
.social-embed-card p,
.social-embed-card small {
  text-rendering: geometricPrecision;
}

.social-card,
.social-composer,
.social-feed-controls {
  contain: layout style;
}

.social-card img,
.social-embed-card img,
.image-grid-embed img,
.social-uploaded-image-card img {
  max-width: 100% !important;
  height: auto;
}


/* -------------------------------------------------------------------------
   Phase R25 — shared composer + attachment UI compatibility
   Normalizes composer controls, attachment fields, picker surfaces, image upload
   affordances, and status feedback before release hardening continues.
------------------------------------------------------------------------- */

.social-composer,
.attachment-picker,
.composer-attachment-fields,
.composer-image-upload-field,
.attachment-picker-results,
.attachment-picker-selection {
  min-width: 0 !important;
}

.social-composer textarea,
.social-composer input,
.social-composer button,
.attachment-picker input,
.attachment-picker button {
  font: inherit;
}

.composer-attachment-fields input,
.composer-attachment-fields textarea,
.attachment-picker-search input {
  max-width: 100% !important;
  min-width: 0 !important;
}

.composer-attachment-fields [hidden],
.attachment-picker[hidden],
.mobile-search-dialog[hidden] {
  display: none !important;
}

.composer-image-upload-field input[type="file"] {
  max-width: 100% !important;
  color: var(--social-soft) !important;
}

.composer-status,
[data-composer-status] {
  overflow-wrap: anywhere !important;
}

.attachment-picker-results,
.attachment-picker-list,
[data-attachment-picker-results] {
  overscroll-behavior: contain;
}

.attachment-picker-result,
.attachment-picker-row,
[data-attachment-picker-result] {
  min-width: 0 !important;
}


/* -------------------------------------------------------------------------
   Phase R26 — shared post card media + action row hardening
   Release guardrails for avatars, uploaded images, embedded resource cards,
   action icons, counts, comments, and long text/media edge cases.
------------------------------------------------------------------------- */

.social-card {
  overflow: hidden;
}

.social-card-header,
.author-meta,
.social-post-body,
.social-embed-card,
.social-uploaded-image-card,
.social-comments-panel {
  min-width: 0 !important;
}

.social-avatar,
.social-user-avatar {
  flex: 0 0 auto;
}

.social-uploaded-image-card,
.social-embed-card,
.image-grid-embed {
  overflow: hidden !important;
}

.social-uploaded-image-card img,
.image-grid-embed img,
.social-embed-card img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

.social-post-body {
  white-space: pre-wrap;
}

.social-card-actions {
  user-select: none;
}

.social-card-actions button,
.social-card-actions a {
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

.social-card-actions button:focus-visible,
.social-card-actions a:focus-visible,
.social-comments-panel button:focus-visible,
.social-comments-panel textarea:focus-visible,
.social-comments-panel input:focus-visible {
  outline: 2px solid rgba(159,230,83,.55) !important;
  outline-offset: 3px !important;
}

.social-action-icon {
  pointer-events: none !important;
}

.social-comments-panel {
  overflow: hidden !important;
}

.social-comments-panel textarea,
.social-comments-panel input {
  max-width: 100% !important;
  min-width: 0 !important;
}


/* -------------------------------------------------------------------------
   Phase R26.1 — desktop regression containment marker
   Main/mobile R26 behavior was retained because mobile validation passed.
   Desktop-specific R26 card/media overrides were rolled back in the desktop
   CSS file to the R25 validated baseline.
------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Phase R27 — shared right rail adaptive layout foundation
   Release hardening for rail cards, rail rows, metric/status badges, and long
   right-rail labels. Desktop/mobile behavior is refined in split CSS files.
------------------------------------------------------------------------- */

.coalition-social-rail,
.rail-card,
.rail-row,
.rail-topic,
.rail-node,
.rail-report,
.rail-room,
.rail-suggestion {
  min-width: 0 !important;
}

.rail-card {
  overflow: hidden !important;
}

.rail-card h2,
.rail-card h3,
.rail-card strong,
.rail-card span,
.rail-card small,
.rail-card p,
.rail-row,
.rail-topic,
.rail-node,
.rail-report,
.rail-room,
.rail-suggestion {
  overflow-wrap: anywhere;
}

.rail-card a,
.rail-card button {
  -webkit-tap-highlight-color: transparent;
}

.rail-card a:focus-visible,
.rail-card button:focus-visible {
  outline: 2px solid rgba(159,230,83,.55) !important;
  outline-offset: 3px !important;
}


/* -------------------------------------------------------------------------
   Phase R27.1 — right rail desktop containment note
   Shared R27 rail label protections are retained, but desktop sticky rail
   behavior is rolled back in the desktop split CSS after validation failure.
------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Phase R28 — shared touch, keyboard, and accessibility hardening
   Release-safe accessibility guardrails for focus visibility, touch targets,
   icon-only controls, reduced motion, forced colors, and form legibility.
   CSS-only pass to preserve validated JS and interaction behavior.
------------------------------------------------------------------------- */

body.reports-social-page {
  --r28-focus-ring: rgba(159,230,83,.72);
  --r28-focus-soft: rgba(159,230,83,.16);
  --r28-touch-target: 44px;
}

.reports-social-page * {
  -webkit-tap-highlight-color: transparent;
}

.reports-social-page a,
.reports-social-page button,
.reports-social-page input,
.reports-social-page textarea,
.reports-social-page select,
.reports-social-page [role="button"],
.reports-social-page [tabindex] {
  scroll-margin-top: 96px;
}

.reports-social-page button,
.reports-social-page a,
.reports-social-page [role="button"] {
  touch-action: manipulation;
}

.reports-social-page button:focus,
.reports-social-page a:focus,
.reports-social-page input:focus,
.reports-social-page textarea:focus,
.reports-social-page select:focus,
.reports-social-page [role="button"]:focus,
.reports-social-page [tabindex]:focus {
  outline: none;
}

.reports-social-page button:focus-visible,
.reports-social-page a:focus-visible,
.reports-social-page input:focus-visible,
.reports-social-page textarea:focus-visible,
.reports-social-page select:focus-visible,
.reports-social-page [role="button"]:focus-visible,
.reports-social-page [tabindex]:focus-visible {
  outline: 2px solid var(--r28-focus-ring) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px var(--r28-focus-soft) !important;
}

.reports-social-page [aria-disabled="true"],
.reports-social-page button:disabled,
.reports-social-page input:disabled,
.reports-social-page textarea:disabled {
  cursor: not-allowed !important;
  opacity: .58 !important;
}

.social-icon-button,
.mobile-search-button,
.mobile-nav-button,
.composer-type-tabs button,
.composer-submit-button,
.social-card-actions button,
.social-card-actions a,
.post-header-tools button,
.rail-card button,
.rail-card a,
.social-tabset a,
.feed-sort-row button,
.attachment-picker button,
.social-popover button {
  min-width: var(--r28-touch-target);
  min-height: var(--r28-touch-target);
}

.social-action-icon,
.social-icon-button::before,
.social-icon-button::after {
  pointer-events: none !important;
}

.composer-type-tabs button,
.social-card-actions button,
.social-card-actions a,
.rail-card button,
.social-popover button {
  user-select: none;
}

.social-composer textarea,
.social-composer input,
.attachment-picker input,
.composer-attachment-fields input,
.composer-attachment-fields textarea,
.social-comments-panel textarea,
.social-comments-panel input,
.mobile-search-dialog input,
.social-search input {
  caret-color: var(--social-green);
}

@media (prefers-reduced-motion: reduce) {
  .reports-social-page *,
  .reports-social-page *::before,
  .reports-social-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .reports-social-page button,
  .reports-social-page a,
  .reports-social-page input,
  .reports-social-page textarea,
  .reports-social-page select {
    border: 1px solid ButtonText !important;
  }

  .reports-social-page button:focus-visible,
  .reports-social-page a:focus-visible,
  .reports-social-page input:focus-visible,
  .reports-social-page textarea:focus-visible,
  .reports-social-page select:focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R29 — shared cross-browser compatibility pass
   Stabilizes De Tectis across Chromium, Firefox, Safari/WebKit, Android Chrome,
   and iOS Safari without changing validated layout intent.
------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.reports-social-page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body.reports-social-page {
    overflow-x: hidden;
  }
}

.reports-social-page *,
.reports-social-page *::before,
.reports-social-page *::after {
  box-sizing: border-box;
}

.reports-social-page img,
.reports-social-page svg,
.reports-social-page video,
.reports-social-page canvas {
  max-width: 100%;
}

.reports-social-page button,
.reports-social-page input,
.reports-social-page textarea,
.reports-social-page select {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.reports-social-page textarea {
  -webkit-appearance: none;
  appearance: none;
}

.reports-social-page button {
  border-radius: inherit;
}

.social-sidebar,
.coalition-social-rail,
.social-popover,
.mobile-search-dialog,
.attachment-picker-results {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.social-sidebar::-webkit-scrollbar,
.coalition-social-rail::-webkit-scrollbar,
.social-popover::-webkit-scrollbar,
.mobile-search-dialog::-webkit-scrollbar,
.attachment-picker-results::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.social-composer,
.social-card,
.rail-card,
.social-popover,
.mobile-search-dialog,
.attachment-picker {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .social-composer,
  .social-card,
  .rail-card,
  .social-popover,
  .mobile-search-dialog,
  .attachment-picker {
    background-color: rgba(1, 8, 9, .94) !important;
  }
}

@supports selector(:focus-visible) {
  .reports-social-page button:focus:not(:focus-visible),
  .reports-social-page a:focus:not(:focus-visible),
  .reports-social-page input:focus:not(:focus-visible),
  .reports-social-page textarea:focus:not(:focus-visible),
  .reports-social-page select:focus:not(:focus-visible) {
    outline: none !important;
  }
}

@supports not (height: 100dvh) {
  body.reports-social-page {
    min-height: 100vh;
  }
}

@supports not (width: min(100%, 10px)) {
  .coalition-social-shell,
  .social-header,
  .social-composer,
  .social-feed-controls,
  .social-feed {
    max-width: 100%;
  }
}


/* -------------------------------------------------------------------------
   Phase R30 — shared performance, asset budget, and cache strategy
   Paint/layout containment and below-fold rendering guardrails. These rules
   are intentionally conservative: they improve render cost without changing
   the validated R29 layout intent.
------------------------------------------------------------------------- */

body.reports-social-page {
  --r30-content-visibility-buffer: 900px;
}

.social-card,
.rail-card,
.social-composer,
.social-feed-controls,
.attachment-picker,
.social-popover {
  contain: layout style paint;
}

.social-card,
.rail-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}

.social-composer,
.social-feed-controls,
.social-header,
.mobile-nav-head,
.social-utility-bar {
  content-visibility: visible;
}

.social-uploaded-image-card,
.image-grid-embed,
.social-embed-card {
  contain: layout paint;
}

.social-uploaded-image-card img,
.image-grid-embed img,
.social-embed-card img,
.social-avatar,
.social-user-avatar {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.social-action-icon,
.social-icon-button,
.mobile-search-button,
.mobile-nav-button {
  will-change: auto;
}

@supports not (content-visibility: auto) {
  .social-card,
  .rail-card {
    contain: layout style paint;
  }
}


/* -------------------------------------------------------------------------
   Phase R30.1 — desktop top restore containment override
   R30 mobile validation passed, but desktop top/header/utility alignment failed.
   The cause is performance containment creating unexpected containing/paint
   boundaries around fixed and upper utility layers. Desktop disables those
   containment rules for shell/header/utility surfaces only.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .coalition-social-shell,
  .coalition-social-main,
  .social-header,
  .social-title-wrap,
  .social-utility-bar,
  .social-utility-popovers,
  .mobile-nav-head {
    contain: none !important;
    content-visibility: visible !important;
  }

  .social-composer,
  .social-feed-controls {
    content-visibility: visible !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R31.1 — live stream route correction
   `live.php` is a dedicated live streaming surface, not an Events redirect.
   Visual behavior remains unchanged for reports.php.
------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Phase R32 — degraded state + empty state release hardening
   Visible fallback/degraded mode and richer feed empty states. These states
   keep the surface usable when backend sources are empty or temporarily down.
------------------------------------------------------------------------- */

.social-degraded-banner,
.social-empty-state {
  min-width: 0 !important;
  overflow: hidden !important;
}

.social-degraded-banner {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-color: rgba(255, 207, 102, .34) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,207,102,.10), transparent 42%),
    linear-gradient(180deg, rgba(18, 14, 4, .74), rgba(3, 10, 10, .72)) !important;
}

.social-degraded-banner > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 207, 102, .34);
  border-radius: 50%;
  color: #ffd36e;
  background: rgba(255,207,102,.08);
}

.social-degraded-banner strong,
.social-empty-state h2 {
  display: block;
  margin: 0;
  color: var(--social-text);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.social-degraded-banner em {
  display: block;
  margin-top: 4px;
  color: var(--social-soft);
  font-style: normal;
  line-height: 1.45;
}

.social-degraded-banner a,
.empty-state-actions a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(159,230,83,.30);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--social-green);
  background: rgba(2, 12, 12, .68);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}

.social-empty-state {
  text-align: left;
  padding: clamp(22px, 3vw, 34px) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(159,230,83,.09), transparent 44%),
    linear-gradient(180deg, rgba(3,12,12,.78), rgba(1,7,8,.72)) !important;
}

.social-empty-state > span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid rgba(159,230,83,.28);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--social-green);
  background: rgba(159,230,83,.07);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.social-empty-state h2 {
  margin-top: 16px;
  font-size: clamp(20px, 3vw, 31px);
  line-height: 1.05;
}

.social-empty-state p {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--social-soft);
  line-height: 1.6;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}


/* -------------------------------------------------------------------------
   Phase R33 — server load optimization + load scale management
   Visual notice for optional high/critical load profile. Normal mode remains
   silent so the validated De Tectis surface is unchanged.
------------------------------------------------------------------------- */

.social-load-banner {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 14px 16px;
  border-color: rgba(113, 199, 255, .30) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(113,199,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(5, 16, 22, .76), rgba(3, 10, 10, .72)) !important;
}

.social-load-banner > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(113,199,255,.30);
  border-radius: 50%;
  color: #9fdfff;
  background: rgba(113,199,255,.08);
}

.social-load-banner strong {
  display: block;
  color: var(--social-text);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.social-load-banner em,
.social-load-banner small {
  display: block;
  color: var(--social-soft);
  font-style: normal;
  line-height: 1.45;
}

.social-load-banner small {
  color: #9fdfff;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

body[data-load-mode="high"] .social-card:nth-of-type(n+13),
body[data-load-mode="critical"] .social-card:nth-of-type(n+9) {
  content-visibility: auto;
}


/* Phase 3A.2 — profile bridge avatar image containment */
.profile-bridge-panel header > span[data-profile-bridge-avatar] {
  overflow: hidden;
  text-transform: uppercase;
  line-height: 1;
  word-break: normal;
  white-space: nowrap;
}

.profile-bridge-panel header > span[data-profile-bridge-avatar].has-avatar-image {
  padding: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(159,230,83,.12), transparent 62%),
    rgba(2,8,9,.72);
}

.profile-bridge-panel header > span[data-profile-bridge-avatar] img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}


/* =============================================================================
   PHASE 3B.2 — DE TECTIS COMPOSER CONTROL BAND REPAIR
   Fixes failed Phase 3B:
   - Do not force the whole form into a brittle grid.
   - Use a real composer-control-band wrapper in reports.php.
   - Keep mode buttons, helper/status text, and TRANSMIT aligned without text collapse.
   ============================================================================= */

body.reports-social-page .social-composer-form {
  display: grid;
}

body.reports-social-page .composer-control-band {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(170px, 1fr) auto;
  grid-template-areas: "modes status transmit";
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  padding: 10px 18px 14px 92px;
  border-top: 1px solid rgba(70, 190, 255, .13);
}

body.reports-social-page .composer-control-band .composer-actions {
  grid-area: modes;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body.reports-social-page .composer-control-band .composer-actions::-webkit-scrollbar {
  display: none;
}

body.reports-social-page .composer-control-band .composer-actions button {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

body.reports-social-page .composer-status-line {
  grid-area: status;
  min-width: 0;
  max-width: 310px;
  margin: 0;
  color: rgba(193, 207, 198, .78);
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.reports-social-page .composer-status-line[data-state="ok"] {
  color: var(--social-green);
}

body.reports-social-page .composer-status-line[data-state="error"],
body.reports-social-page .social-r1-toast[data-state="error"] {
  color: #ff6a5c;
}

body.reports-social-page .composer-status-line[data-state="warn"] {
  color: var(--social-amber);
}

body.reports-social-page .composer-control-band .composer-submit-button {
  grid-area: transmit;
  justify-self: end;
  align-self: center;
  min-width: clamp(118px, 10vw, 150px);
  min-height: 40px;
  margin: 0;
  border-radius: 0;
  color: #bcefff;
  border-color: rgba(70, 190, 255, .44);
  background: rgba(4, 18, 24, .72);
  letter-spacing: 1.6px;
  font-size: 14px;
  font-weight: 700;
}

body.reports-social-page .composer-control-band .composer-submit-button:hover {
  color: #d7f7ff;
  border-color: rgba(104, 216, 255, .72);
  background: rgba(14, 46, 58, .82);
}

/* Reset old submit-row if a stale copy remains elsewhere. */
body.reports-social-page .composer-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Narrow desktop / devtools viewport: keep modes + transmit in one row, status below. */
@media (max-width: 1280px) and (min-width: 821px) {
  body.reports-social-page .composer-control-band {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "modes transmit"
      "status status";
    row-gap: 8px;
  }

  body.reports-social-page .composer-status-line {
    max-width: none;
    padding-right: 8px;
  }
}

/* Mobile: stack safely and keep touch targets usable. */
@media (max-width: 820px) {
  body.reports-social-page .composer-control-band {
    grid-template-columns: 1fr;
    grid-template-areas:
      "modes"
      "status"
      "transmit";
    padding: 10px 18px 16px;
    gap: 10px;
  }

  body.reports-social-page .composer-control-band .composer-actions {
    width: 100%;
    gap: 14px;
    overflow-x: auto;
  }

  body.reports-social-page .composer-status-line {
    max-width: none;
    font-size: 11px;
  }

  body.reports-social-page .composer-control-band .composer-submit-button {
    justify-self: stretch;
    width: 100%;
    min-height: 44px;
  }

  body.reports-social-page .composer-attachment-fields,
  body.reports-social-page .composer-picker-bar,
  body.reports-social-page .composer-attachment-picker {
    margin-left: 18px !important;
    margin-right: 18px !important;
    padding-left: 0 !important;
  }
}


/* =============================================================================
   PHASE 3B.3 — DE TECTIS COMPOSER MODE VISIBILITY REPAIR
   Validation correction after Phase 3B.2:
   - Composer is in frame.
   - Helper text no longer collapses.
   - But only the selected Text mode is visible.
   Fix:
   - Keep composer-control-band markup.
   - Use a stable two-row layout:
       row 1: all mode buttons
       row 2: helper/status text + TRANSMIT
   ============================================================================= */

body.reports-social-page .composer-control-band {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "modes modes"
    "status transmit" !important;
  align-items: center !important;
  gap: 8px clamp(14px, 1.6vw, 24px) !important;
  padding: 10px 18px 14px 92px !important;
  border-top: 1px solid rgba(70, 190, 255, .13) !important;
}

body.reports-social-page .composer-control-band .composer-actions {
  grid-area: modes !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px clamp(14px, 1.3vw, 22px) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.reports-social-page .composer-control-band .composer-actions button {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

body.reports-social-page .composer-control-band .composer-actions button span {
  display: inline-block !important;
  margin-right: 6px !important;
  line-height: 1 !important;
}

body.reports-social-page .composer-status-line {
  grid-area: status !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  color: rgba(193, 207, 198, .78) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.reports-social-page .composer-control-band .composer-submit-button {
  grid-area: transmit !important;
  justify-self: end !important;
  align-self: center !important;
  min-width: clamp(118px, 10vw, 150px) !important;
  min-height: 40px !important;
  margin: 0 !important;
}

/* Devtools / narrow desktop: keep full mode row visible; stack status and transmit only if needed. */
@media (max-width: 1100px) and (min-width: 821px) {
  body.reports-social-page .composer-control-band {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "modes"
      "status"
      "transmit" !important;
  }

  body.reports-social-page .composer-control-band .composer-submit-button {
    justify-self: start !important;
  }
}

/* Mobile remains stacked and touch-safe. */
@media (max-width: 820px) {
  body.reports-social-page .composer-control-band {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "modes"
      "status"
      "transmit" !important;
    padding: 10px 18px 16px !important;
  }

  body.reports-social-page .composer-control-band .composer-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body.reports-social-page .composer-control-band .composer-actions::-webkit-scrollbar {
    display: none !important;
  }

  body.reports-social-page .composer-control-band .composer-submit-button {
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 44px !important;
  }
}


/* =============================================================================
   PHASE 4 — DE TECTIS FEED CARD DENSITY + EXPAND
   Goal:
   - Remove dead vertical space caused by forced minimum card height.
   - Keep normal posts compact.
   - Cap long posts with an accessible expand/collapse control.
   - Preserve Phase 3A/3B composer and social-action passes.
   ============================================================================= */

body.reports-social-page .social-feed {
  gap: 10px !important;
}

body.reports-social-page .social-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 16px 20px 13px !important;
}

body.reports-social-page .social-card-header {
  margin-bottom: 0 !important;
}

body.reports-social-page .social-post-body {
  position: relative;
  margin: 12px 0 10px !important;
  line-height: 1.52 !important;
  overflow-wrap: break-word;
  word-break: normal;
}

body.reports-social-page .social-post-body.is-collapsible:not(.is-expanded) {
  max-height: 7.6em;
  overflow: hidden;
}

body.reports-social-page .social-post-body.is-collapsible:not(.is-expanded)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.4em;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,10,12,0), rgba(3,10,12,.96));
}

body.reports-social-page .social-post-body.is-collapsible.is-expanded {
  max-height: none;
  overflow: visible;
}

body.reports-social-page .post-expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: -2px 0 10px;
  padding: 0 11px;
  border: 1px solid rgba(159,230,83,.24);
  border-radius: 999px;
  background: rgba(139,190,71,.07);
  color: var(--social-green);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}

body.reports-social-page .post-expand-button:hover {
  border-color: rgba(159,230,83,.46);
  background: rgba(139,190,71,.12);
}

body.reports-social-page .social-card-actions {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

body.reports-social-page .social-comments-panel {
  margin-top: 8px !important;
}

body.reports-social-page .social-embed-card,
body.reports-social-page .image-grid-embed,
body.reports-social-page .social-uploaded-image-card {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Cards with attachments can still breathe without creating blank empty text cards. */
body.reports-social-page .social-card:has(.social-embed-card),
body.reports-social-page .social-card:has(.image-grid-embed),
body.reports-social-page .social-card:has(.social-uploaded-image-card) {
  padding-bottom: 15px !important;
}

/* Browser fallback when :has is unavailable is harmless; the base compact card still applies. */
@supports not selector(:has(*)) {
  body.reports-social-page .social-card {
    padding-bottom: 15px !important;
  }
}

@media (max-width: 820px) {
  body.reports-social-page .social-card {
    padding: 14px !important;
  }

  body.reports-social-page .social-post-body.is-collapsible:not(.is-expanded) {
    max-height: 8.8em;
  }

  body.reports-social-page .post-expand-button {
    min-height: 32px;
    margin-bottom: 9px;
  }
}