/* base.css (aufgeräumt)
   - Zusammengeführt aus: background.css, ios-standalone.css, reset.css + Utilities.
   - Ziel: gleiche Wirkung, weniger Redundanz, klarere Struktur.
*/
			  
/* ============================================================
   1) CSS Variablen (ehemals: /css/base/variables.css)
   ============================================================ */
:root {
  --color-bg: #1e1240;
  --color-box: #2b1c52;
  --color-primary: #a55eff;
  --color-primary-hover: #933bff;
  --color-text: #ffffff;
  --color-muted: #cccccc;
  --color-primary-text: #f5f5f5;
  --color-title: #d4baff;
  --color-active: #e2aaff;

  /* Chat */
  --color-chat-own: #9b5de5;
  --color-chat-other: #7a44c7;
  --color-chat-time: rgba(255, 255, 255, 0.8);

  /* List Buttons */
  --color-list-button-bg: #222;
  --color-list-button-text: #fff;

  /* Moderation / Reports
     NOTE: Werte an frühere Utility-Klassen (.text-ok / .text-notok) angepasst,
     damit sich das Erscheinungsbild nicht ändert. */
  --color-ok: #2fe66b;     /* vorher: .text-ok */
  --color-notok: #ff4d4d;  /* vorher: .text-notok */

  --bg-ok: rgba(68, 221, 136, 0.14);
  --bg-notok: rgba(255, 107, 107, 0.16);
  --br-ok: rgba(68, 221, 136, 0.45);
  --br-notok: rgba(255, 107, 107, 0.45);

  --border-radius: 0.6rem;
  --padding: 1rem;

  --font-lg: 1.25rem;
  --font-xl: 1.5rem;
  --font-xxl: 2rem;
}

/* ============================================================
   2) Reset + Base Elements (ehemals: /css/base/reset.css)
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Document (zusammengeführt)
   Vorher doppelt vorhanden als:
   - html, body { height/margin/padding/background/... } (background.css)
   - html, body { height/font/line-height/smoothing/... } (reset.css)
*/
html,
body {
  height: 100%;
  min-height: 100%;

  margin: 0;
  padding: 0;

  font-family: Arial, sans-serif;
  line-height: 1.2;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: var(--color-text);

  /* Hintergrund (Gradient) + Fallback */
  background-color: var(--color-bg);
  background: linear-gradient(135deg, #0a0515 0%, #2b1750 50%, #4b2b80 100%);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ============================================================
   3) iOS / Standalone / Safe-Area (background + ios-standalone)
   ============================================================ */

/* iOS Safari: fixed-background vermeiden (weiße Flächen/Flash) */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    background-attachment: fixed; /* statt "fixed" */
  }

  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--color-bg); /* verhindert weiße Ränder */
  }
}

/* iOS Standalone Mode (PWA / Add to Home Screen) */
html.standalone-mode body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--color-bg);
}

/* ⬆️ HEADER mit Titel */
html.standalone-mode.standalone-mode--header .sticky-container {
  padding-top: env(safe-area-inset-top);
}

html.standalone-mode.standalone-mode--header header {
  margin-top: 0;
  padding-top: 0.6rem;
  background: rgba(30, 18, 64, 0.9); /* wie header.css */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ⬇️ FOOTER-NAV (fester Footer) */
html.standalone-mode.standalone-mode--footer-nav #footer-nav {
  height: calc(30px + env(safe-area-inset-bottom));
  background: rgba(30, 18, 64, 0.9);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: 8px;
  box-sizing: border-box;
}

/* Extra Fläche unterhalb, falls Seite kein body-padding setzt */
html.standalone-mode.standalone-mode--footer-nav body::after {
  content: "";
  display: block;
  height: env(safe-area-inset-bottom);
}

/* ⬆️ TOP-MENU & SCROLL-MENU (optisch identisch)
   Hinweis: Zusammengeführt. Frühere Bezeichnungen:
   - .top-menu
   - .top-scroll-menu
*/
html.standalone-mode.standalone-mode--topmenu .top-menu,
html.standalone-mode.standalone-mode--topmenu .top-scroll-menu {
  padding-top: env(safe-area-inset-top);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ⬇️ BOTTOM-MENU */
html.standalone-mode.standalone-mode--bottommenu .bottom-menu {
  height: calc(70px + env(safe-area-inset-bottom));
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  background: rgba(30, 18, 64, 0.9);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ⛔️ Alte Fallback-Fläche (war auskommentiert) – bleibt als Doku erhalten */
/*
html.standalone-mode body::before {
  content: "";
  position: fixed;
  top: 0;
  height: env(safe-area-inset-top);
  width: 100%;
  background: var(--color-bg);
  z-index: 9999;
}
*/

/* ============================================================
   4) Utilities / Interaktionen / Overlays
   ============================================================ */

/* Scroll-Lock Utility */
body.no-scroll {
  overflow: hidden;
  height: 100%;
  touch-action: none;
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
}

/* Default: Textselektion gesperrt (App global) */
#app, #app * {
  -webkit-user-select: none;
  user-select: none;
}

/* Ausnahmen: Eingaben */
#app input,
#app textarea,
#app [contenteditable="true"],
#app [contenteditable="true"] * {
  -webkit-user-select: text;
  user-select: text;
}


/* Nur dort sperren, wo es Sinn macht (Hold/Viewer/Buttons). */
button,
a,
.bottom-menu,
.post-card,
.post-actions,
.image-post,
#image-hold-viewer,
#image-hold-viewer * {
  -webkit-user-select: none;
  user-select: none;
}

/* verhindert Scroll-Kettenreaktionen / Pull-to-Refresh */
#image-hold-viewer {
  overscroll-behavior: contain; /* Chrome/Android */
  touch-action: none;           /* blockt Panning/Pinch als Pointer-Gesten */
}

/* iOS: kein Callout/Highlight/Selection */
#image-hold-viewer,
#image-hold-viewer img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ==== iOS: Bild-Callout/Copy/Drag/Select verhindern ==== */
/* Default: Browser-Gesten nicht kaputtmachen */
img,
picture,
video,
canvas,
svg {
  touch-action: manipulation;
}

/* Nur im Hold-Viewer/Gesture-sensitiven Bereichen sperren */
#image-hold-viewer,
#image-hold-viewer img,
#image-hold-viewer video,
.image-post img {
  touch-action: none;
}

a,
button,
[role="button"] img {
  -webkit-touch-callout: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Für Bild-Viewer/-Cards: Interaction komplett blocken
   Hinweis: Zusammengeführt. Frühere Selektoren:
   - .img-locked
   - .image-post img
   - #viewer img
   - #viewer-preview
   - #viewer-traced
*/
.img-locked,
.image-post img,
#viewer img,
#viewer-preview,
#viewer-traced {
  pointer-events: none;
}

/* ===== Upload Overlay (statt <style>-Inject aus JS) ===== */
.upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.8);
  backdrop-filter: saturate(1.2) blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-card {
  width: min(420px, 90vw);
  border-radius: 16px;
  background: #0f1218;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 20px 22px;
}

.upload-title {
  font-weight: 600;
  font-size: 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin-bottom: 10px;
}

.upload-text {
  opacity: 0.9;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 14px;
  min-height: 1.2em;
}

.upload-bar {
  height: 10px;
  background: #1d2330;
  border-radius: 999px;
  overflow: hidden;
}

.upload-bar-fill {
  height: 100%;
  width: var(--upload-progress, 0%);
  background: linear-gradient(90deg, #6ea8fe, #9b7bff);
  transition: width 0.15s ease;
}

/* Während Upload Interaktionen blockieren (statt body.style...) */
html.is-uploading {
  overflow: hidden;
}

html.is-uploading body {
  pointer-events: none;
}

/* ============================================================
   5) atLinks Styling (Phase 3)
   Wichtig: steht NACH a{...}, damit underline greift
   ============================================================ */
.at-link {
  text-decoration: underline;
  cursor: pointer;
}

/* Hover/Active sichtbar, ohne Farben vorzugeben */
.at-link:hover {
  text-decoration-thickness: 2px;
}

.at-link:active {
  transform: translateY(0.5px);
}

/* Fokus sichtbar (Keyboard/A11y) */
.at-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Disabled-Style (für später) */
.at-link.is-disabled {
  opacity: 0.65;
  cursor: default;
  text-decoration: none;
}

/* ============================================================
   6) Kleine Utilities
   ============================================================ */
.text-ok {
  color: var(--color-ok); /* vorher: #2fe66b */
  font-weight: 700;
}

.text-notok {
  color: var(--color-notok); /* vorher: #ff4d4d */
  font-weight: 700;
}

.filter-btn svg {
  color: var(--color-primary);
}

							  
							  
#app, #app * { -webkit-user-select: none !important; user-select: none !important; }
#app input, #app textarea, #app [contenteditable="true"], #app [contenteditable="true"] * {
  -webkit-user-select: text !important;
  user-select: text !important;
}