/* style.css - Globales Design für TimTom */

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: sans-serif; 
}

body { 
    background-color: #000; 
    color: #fff; 
    height: 100vh; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
}

a { 
    color: #fff; 
    text-decoration: none; 
}

/* ================================
   Header & Navigation
================================ */
.app-header { 
    width: 100%; 
    z-index: 10; 
    padding: 15px 0; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); 
    position: absolute; 
    top: 0; 
}
.top-nav { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    font-size: 14px; 
    font-weight: bold; 
    text-shadow: 1px 1px 2px #000; 
}
.top-nav .active { 
    border-bottom: 2px solid #fff; 
    padding-bottom: 5px; 
}

/* ================================
   Main Content Area
================================ */
.main-content { 
    flex: 1; 
    position: relative; 
    height: 100vh; 
    width: 100%; 
    overflow-y: auto; /* Erlaubt scrollen, falls Inhalt zu lang ist */
}

/* ================================
   Footer & Bottom Nav
================================ */
.app-footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    background: #000; 
    border-top: 1px solid #333; 
    z-index: 10; 
}
.bottom-nav { 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    height: 100%; 
    font-size: 10px; 
    text-align: center; 
}
.bottom-nav .icon { 
    display: flex; 
    flex-direction: column; 
    opacity: 0.7; 
    gap: 3px; 
}
.add-btn { 
    background: #040404; 
    color: #000; 
    width: 40px; 
    height: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 8px; 
    font-size: 24px; 
    font-weight: bold; 
    cursor: pointer; 
}

/* ================================
   Video Feed (index.php)
================================ */
.video-container {
    height: 100vh !important;
    height: 100dvh !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 1. Der äußere Container für das Scrollen (neu) */
.video-feed-wrapper {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* Scrollbar für Edge/IE ausblenden */
    scrollbar-width: none;     /* Scrollbar für Firefox ausblenden */
}

/* Scrollbar für Chrome/Safari ausblenden */
.video-feed-wrapper::-webkit-scrollbar {
    display: none;
}
/* Jedes einzelne Video-Element nimmt exakt die Bildschirmgröße ein */
.video-slide {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
}

/* Zwingt den Browser, die Grafikkarte (GPU) für das Video zu nutzen */
.feed-video {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.video-owner { font-weight: bold; font-size: 16px; margin-bottom: 5px; }
.video-desc { 
    font-size: 14px; 
    display: -webkit-box; 
    line-clamp: 3;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    margin-bottom: 5px; 
    cursor: pointer;
}
.video-type { 
    display: inline-block; 
    background: rgba(255,0,0,0.8); 
    padding: 3px 8px; 
    border-radius: 4px; 
    font-size: 12px; 
    font-weight: bold; 
    margin-bottom: 5px; 
}
.ad-btn { 
    background: #fff; 
    color: #000; 
    padding: 5px 10px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 12px; 
    cursor: pointer; 
    border: none; 
}

/* Beschreibung auf 2-3 Zeilen begrenzen */
/* start */
.video-desc-short {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Mehr anzeigen"-Button */
.desc-more-btn {
    display: inline-block;
    background: transparent;
    border: none;
    color: #d1d5db; /* Hellgrau */
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 4px;
    padding: 0;
    transition: color 0.2s ease;
}

.desc-more-btn:hover {
    color: #ffffff; /* Weiß beim Drüberfahren */
}

/* "Schließen"-Button */
.desc-close-btn {
    display: inline-block;
    background: transparent;
    border: none;
    color: #f87171; /* Rot */
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 8px;
    padding: 0;
    transition: color 0.2s ease;
}

.desc-close-btn:hover {
    color: #fca5a5; /* Hellrot beim Drüberfahren */
}

/* Hilfsklasse zum Verstecken */
.hidden {
    display: none !important;
}

/* Stilvolles Upload-Panel mit sauberem Abstand über dem Footer & sanfter Animation */
#upload-panel {
    position: fixed;
    bottom: 90px; /* Passt sich perfekt über den Footer an (kannst du auf z.B. 100px erhöhen, falls der Footer höher ist) */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Startet leicht versetzt für die Animation */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Butterweiche "Ease-Out"-Animation */
    z-index: 9999;
}

/* Zustand, wenn das Panel geöffnet wird (Klasse 'hidden' wird entfernt) */
#upload-panel:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Gleitet sanft an seinen Platz */
}
/* ======END - Video Feed ============ */


/* Rechtes TikTok-Menü exakt auf die gleiche Höhe setzen */
.right-menu { 
    position: absolute !important; 
    right: 12px !important; 
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    gap: 16px !important; 
    z-index: 30 !important; 
}

.right-menu .icon { 
    width: 45px; 
    height: 45px; 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
    cursor: pointer; 
}

.user-avatar { border: 2px solid #fff; }


/* 1. Feed-Container Höhe & Padding fixieren */
#videoFeed, 
#videoFeed > div {
    height: 100vh !important;
    height: 100dvh !important; /* Ersetzt starres vh für mobile Safari & Chrome Leisten */
    position: relative !important;
    box-sizing: border-box !important;
}

/* Videobeschreibung unten links */
/* Untere Video-Info (Links): Mehr Abstand nach unten */
.bottom-info { 
    position: absolute !important; 
    left: 16px !important; 
    right: 85px !important; 
    /* 140px Basisabstand schiebt den Text perfekt über die Browser- & Footer-Leiste */
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; 
    z-index: 30 !important; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important; 
}
/* ================================
   Profil & Formulare (profile.php etc.)
================================ */
.profile-section { 
    margin-top: 80px; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}
.avatar-container { margin-bottom: 20px; text-align: center; }
.avatar { 
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid #fff; 
    margin-bottom: 10px; 
}
.no-avatar { 
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    border: 3px dashed #777; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 40px; 
    margin: 0 auto 10px auto; 
    color: #777; 
}
.user-info { text-align: center; margin-bottom: 30px; }
.user-info h2 { font-size: 24px; margin-bottom: 5px; }
.user-info p { color: #aaa; font-size: 14px; }

.form-group { margin-bottom: 20px; width: 100%; max-width: 300px; text-align: center; }
.btn { 
    background-color: #fff; 
    color: #000; 
    padding: 10px 20px; 
    border-radius: 5px; 
    font-weight: bold; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    margin-bottom: 10px; 
    display: inline-block; 
}
.btn-danger { background-color: #ff3b30; color: #fff; }
.msg { color: #ff3b30; font-size: 14px; margin-bottom: 15px; text-align: center; }

/* Layout-Root an den echten mobilen Viewport anpassen */
.chat-page-wrapper {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Berücksichtigt Safari UI-Leisten */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Chat-Verlauf nimmt den restlichen Platz ein und scrollt */
.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Footer fixiert am unteren Rand mit flexiblen Inputs */
.chat-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  /* Safe-Area for iPhones with Home Indicator */
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.chat-input {
  flex: 1;
  min-width: 0; /* Verhindert, dass Input Icons herausdrückt */
  height: 40px;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 16px; /* WICHTIG: 16px verhindert automatisches Rein-Zoomen auf iOS */
}

.chat-action-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Speziell für Smartphones (max. 768px Breite) */
@media (max-width: 768px) {
    .bottom-info {
        left: 16px !important;
        right: 85px !important;
        /* Auf Smartphones von 140px auf 165px anheben */
        bottom: calc(165px + env(safe-area-inset-bottom, 0px)) !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    }

    .right-menu {
        right: 12px !important;
        /* Rechtes Menü exakt auf gleicher Höhe mitziehen */
        bottom: calc(165px + env(safe-area-inset-bottom, 0px)) !important;
    }
}