/*
 * Social Linking - Basisdarstellung
 *
 * Die Karte übernimmt Theme-Variablen, falls das aktive Theme sie definiert
 * (gängige Namen wie --color-text, --color-bg, --color-primary, --font-*).
 * Sind diese nicht vorhanden, greifen die hier definierten Fallback-Werte,
 * angelehnt an die Optik von Mastodon selbst.
 *
 * Theme-Autoren können jede dieser Variablen gezielt überschreiben, z. B.
 * indem sie im eigenen Theme-CSS ".se-mastodon { --se-accent: ...; }" setzen.
 */
.se-mastodon {
  --se-bg: var(--color-surface, var(--background-color, #ffffff));
  --se-text: var(--color-text, var(--text-color, #1e2029));
  --se-muted: var(--color-text-muted, #6b7280);
  --se-border: var(--color-border, #e2e2e6);
  --se-accent: var(--color-primary, var(--color-link, #6364ff));
  --se-radius: var(--border-radius, 12px);
  --se-font: var(--font-family, inherit);

  box-sizing: border-box;
  max-width: 600px;
  margin: 1.5rem 0;
  padding: 1rem;
  font-family: var(--se-font);
  color: var(--se-text);
  background: var(--se-bg);
  border: 1px solid var(--se-border);
  border-radius: var(--se-radius);
  overflow-wrap: anywhere;
}

.se-mastodon * {
  box-sizing: border-box;
}

.se-mastodon a {
  color: var(--se-text);
  text-decoration: none;
}

.se-mastodon a:hover {
  text-decoration: underline;
}

.se-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

/* Boost/Reblog-Kopfzeile */
.se-boost-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--se-muted);
}

.se-boost-header a {
  color: var(--se-muted);
  font-weight: 600;
}

.se-boost-header a:hover {
  color: var(--se-text);
}

/* Kopfzeile: Avatar + Name + Handle */
.se-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.se-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.se-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.se-display-name {
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-handle {
  color: var(--se-muted);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-source-link {
  flex-shrink: 0;
  color: var(--se-muted);
}

/* Content-Warning: <details>/<summary>, per Klick aufklappbar */
.se-cw {
  margin: 0.6rem 0 0.3rem;
}

.se-cw summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.se-cw summary::-webkit-details-marker {
  display: none;
}

.se-cw summary::before {
  content: "▸ ";
  color: var(--se-muted);
}

.se-cw[open] summary::before {
  content: "▾ ";
}

.se-cw-hint {
  margin-left: 0.3rem;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--se-muted);
}

.se-cw[open] .se-cw-hint {
  display: none;
}

.se-cw .se-content {
  margin-top: 0.4rem;
}

/* Beitragstext (aus content_html der API - enthält bereits Links/Hashtags/Mentions) */
.se-content {
  margin: 0.6rem 0;
  line-height: 1.5;
}

.se-content p {
  margin: 0 0 0.6rem;
}

.se-content p:last-child {
  margin-bottom: 0;
}

.se-content a,
.se-profile-note a {
  color: var(--se-accent);
}

.se-content .hashtag,
.se-content .mention,
.se-profile-note .hashtag,
.se-profile-note .mention {
  color: var(--se-accent);
  font-weight: 500;
}

.se-content .invisible,
.se-profile-note .invisible {
  display: none;
}

.se-content .ellipsis::after,
.se-profile-note .ellipsis::after {
  content: "…";
}

/* Medienanhänge */
.se-media {
  display: grid;
  gap: 4px;
  margin: 0.6rem 0;
  border-radius: calc(var(--se-radius) - 4px);
  overflow: hidden;
}

.se-media-single {
  grid-template-columns: 1fr;
}

.se-media-grid {
  grid-template-columns: 1fr 1fr;
}

.se-media img,
.se-media video {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
  background: var(--se-border);
}

/* Sensible Medien: standardmäßig weichgezeichnet, per Klick aufdeckbar.
   Reine CSS-Lösung über eine versteckte Checkbox + zugehöriges <label>,
   kein JavaScript nötig. */
.se-reveal-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.se-media {
  position: relative;
}

.se-media-sensitive img,
.se-media-sensitive video {
  filter: blur(40px);
  transition: filter 0.15s ease;
}

.se-reveal-toggle:checked ~ .se-media-sensitive img,
.se-reveal-toggle:checked ~ .se-media-sensitive video {
  filter: none;
}

.se-media-cw-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
  color: #fff;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
}

.se-reveal-toggle:checked ~ .se-media-sensitive .se-media-cw-overlay {
  display: none;
}

.se-media-cw-text {
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.se-media-cw-button {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Link-Vorschaukarte */
.se-card {
  display: flex;
  margin: 0.6rem 0;
  border: 1px solid var(--se-border);
  border-radius: calc(var(--se-radius) - 4px);
  overflow: hidden;
  color: var(--se-text);
}

.se-card:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--se-border) 30%, transparent);
}

.se-card-image {
  width: 120px;
  min-width: 120px;
  background-size: cover;
  background-position: center;
  background-color: var(--se-border);
}

.se-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.6rem 0.8rem;
  min-width: 0;
}

.se-card-provider {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--se-muted);
}

.se-card-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-card-desc {
  font-size: 0.85rem;
  color: var(--se-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fußzeile: Zeit, Statistiken, Permalink */
.se-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--se-border);
  font-size: 0.85rem;
  color: var(--se-muted);
}

.se-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.se-permalink {
  margin-left: auto;
  color: var(--se-muted);
}

/* Profilkarte (Ausbaustufe) */
.se-profile-header {
  height: 100px;
  margin: -1rem -1rem 0;
  background-color: var(--se-border);
  background-size: cover;
  background-position: center;
  border-radius: var(--se-radius) var(--se-radius) 0 0;
}

.se-profile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding-top: 0.6rem;
}

.se-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 3px solid var(--se-bg);
  margin-top: -40px;
  object-fit: cover;
}

.se-profile-identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.se-profile-identity .se-display-name {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.1rem;
}

.se-profile-note {
  margin: 0.4rem 0;
  line-height: 1.5;
  color: var(--se-text);
}

.se-profile-note p {
  margin: 0 0 0.5rem;
}

.se-profile-note p:last-child {
  margin-bottom: 0;
}

.se-profile-stats {
  display: flex;
  gap: 1.4rem;
  margin: 0.6rem 0 0.2rem;
}

.se-stat-block {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.se-stat-block strong {
  font-size: 1rem;
  line-height: 1.1;
}

.se-stat-block span {
  font-size: 0.78rem;
  color: var(--se-muted);
}

.se-profile-fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.6rem;
}

.se-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--se-border);
  border-radius: calc(var(--se-radius) - 6px);
  font-size: 0.85rem;
}

.se-field-name {
  color: var(--se-muted);
  min-width: 90px;
  flex-shrink: 0;
}

.se-field-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-field-verified {
  border-color: color-mix(in srgb, #22c55e 50%, var(--se-border));
}

.se-field-check {
  color: #22c55e;
  flex-shrink: 0;
}

/* Live-Feed (instanzweite Timeline) */
.se-timeline .se-status {
  margin: 0.75rem 0 0;
}

.se-timeline-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--se-muted);
  padding-bottom: 0.3rem;
}

.se-timeline-empty {
  color: var(--se-muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

/* Fehlerdarstellung */
.se-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 600px;
  margin: 1.5rem 0;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--color-border, #e2e2e6);
  border-radius: var(--border-radius, 12px);
  color: var(--color-text-muted, #6b7280);
  font-size: 0.9rem;
}