/* ============================================
   Link-Kopieren Animation v3
   Phase 1: Instagram (URL kopieren)
   Phase 2: smartfollower (URL einfuegen)
   Mit echten Texten und detaillierter UI
   Zyklus: 8s
   ============================================ */

/* Animation-Container: kein Hintergrund/Border */
.hiw-detail-animation:has(.link-copy-demo) {
    background: none;
    border: none;
}

.link-copy-demo {
    width: 210px;
    height: 380px;
    background: #000;
    border-radius: 28px;
    border: 3px solid #333;
    padding: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lcd-screen {
    background: #000;
    border-radius: 18px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.lcd-notch {
    width: 50px; height: 18px;
    background: #000;
    border-radius: 0 0 12px 12px;
    margin: 0 auto;
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    z-index: 8;
}

/* ── Phases ── */
.lcd-phase-ig, .lcd-phase-sf {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.lcd-phase-ig { animation: lcd-fade-ig 8s ease-in-out infinite; z-index: 2; }
.lcd-phase-sf { animation: lcd-fade-sf 8s ease-in-out infinite; z-index: 1; }

@keyframes lcd-fade-ig { 0%,52%{opacity:1} 58%,100%{opacity:0} }
@keyframes lcd-fade-sf { 0%,52%{opacity:0} 58%,100%{opacity:1} }

/* =====================
   INSTAGRAM COMMON
   ===================== */
.lcd-ig-statusbar {
    height: 16px; display: flex; align-items: center; justify-content: space-between;
    padding: 2px 10px 0; font-size: 6px; color: #aaa;
}
.lcd-ig-statusbar-time { font-weight: 700; }
.lcd-ig-statusbar-icons { display: flex; gap: 3px; }
.lcd-ig-statusbar-dot { width: 4px; height: 4px; background: #aaa; border-radius: 1px; }

/* ── POST / VIDEO ── */
.lcd-ig-post {
    display: flex; flex-direction: column; height: 100%;
}
.lcd-ig-post-head {
    display: flex; align-items: center; gap: 5px; padding: 4px 8px;
}
.lcd-ig-av {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
    flex-shrink: 0; border: 1.5px solid #333;
}
.lcd-ig-av-sm { width: 16px; height: 16px; }
.lcd-ig-uname {
    font-size: 7px; font-weight: 700; color: #eee; flex: 1;
}
.lcd-ig-post-dots { font-size: 10px; color: #888; letter-spacing: 1px; }
.lcd-ig-post-img {
    flex: 1; background: linear-gradient(135deg,#1e1e3a,#2a2a4a);
    display: flex; align-items: center; justify-content: center;
    position: relative; min-height: 100px;
}
.lcd-ig-post-img-icon {
    width: 28px; height: 28px;
    border: 2px solid rgba(255,255,255,0.15); border-radius: 5px;
}
.lcd-ig-bar-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px 0;
}
.lcd-ig-bar-icon {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
}
.lcd-ig-bar-icon svg { width: 14px; height: 14px; stroke: #ccc; fill: none; stroke-width: 2; }
.lcd-ig-bar-share svg { animation: lcd-share-pulse 8s ease-in-out infinite; }
.lcd-ig-bar-bm { margin-left: auto; }
.lcd-ig-bar-bm svg { width: 12px; height: 14px; }
.lcd-ig-meta {
    padding: 2px 8px 4px; font-size: 6px; color: #999;
}
.lcd-ig-meta b { color: #eee; }
.lcd-ig-caption-text {
    padding: 0 8px 6px; font-size: 6px; color: #bbb; line-height: 1.4;
}
.lcd-ig-caption-text b { color: #eee; }

/* ── REEL ── */
.lcd-ig-reel {
    height: 100%; position: relative;
    background: linear-gradient(180deg, #0d0d1a, #1a1a2e);
}
.lcd-ig-reel-play {
    position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);
    width: 36px; height: 36px;
    border: 2px solid rgba(255,255,255,0.2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.lcd-ig-reel-play::after {
    content:''; border-left: 10px solid rgba(255,255,255,0.25);
    border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px;
}
.lcd-ig-reel-side {
    position: absolute; right: 8px; bottom: 55px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lcd-ig-reel-side-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.lcd-ig-reel-side-btn svg { width: 16px; height: 16px; stroke: #eee; fill: none; stroke-width: 2; }
.lcd-ig-reel-side-btn span { font-size: 5px; color: #ccc; }
.lcd-ig-reel-side-share svg { animation: lcd-share-pulse 8s ease-in-out infinite; }
.lcd-ig-reel-info {
    position: absolute; bottom: 8px; left: 8px; right: 36px;
}
.lcd-ig-reel-info-user {
    display: flex; align-items: center; gap: 4px; margin-bottom: 3px;
}
.lcd-ig-reel-info-name { font-size: 7px; font-weight: 700; color: #eee; }
.lcd-ig-reel-info-desc { font-size: 6px; color: #bbb; }
.lcd-ig-reel-info-music { font-size: 5px; color: #888; margin-top: 2px; }

/* ── PROFIL ── */
.lcd-ig-profile { display: flex; flex-direction: column; height: 100%; }
.lcd-ig-prof-top {
    display: flex; align-items: center; padding: 20px 8px 4px; gap: 4px;
}
.lcd-ig-prof-uname { font-size: 8px; font-weight: 700; color: #eee; flex: 1; }
.lcd-ig-prof-dots {
    font-size: 12px; color: #888; letter-spacing: 1px;
    animation: lcd-dots-pulse 8s ease-in-out infinite;
}
.lcd-ig-prof-header {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px;
}
.lcd-ig-prof-pic {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
    border: 2px solid #333; flex-shrink: 0;
}
.lcd-ig-prof-stats { display: flex; gap: 4px; flex: 1; text-align: center; }
.lcd-ig-prof-stat-item { flex: 1; }
.lcd-ig-prof-stat-num { font-size: 8px; font-weight: 700; color: #eee; display: block; }
.lcd-ig-prof-stat-label { font-size: 5px; color: #888; }
.lcd-ig-prof-bio { padding: 2px 8px 4px; }
.lcd-ig-prof-bio-name { font-size: 7px; font-weight: 600; color: #eee; }
.lcd-ig-prof-bio-text { font-size: 6px; color: #bbb; line-height: 1.3; margin-top: 1px; }
.lcd-ig-prof-btn {
    margin: 3px 8px 5px; height: 18px; background: #333; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 6px; font-weight: 600; color: #eee;
}
.lcd-ig-prof-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
    flex: 1; margin: 0 8px;
}
.lcd-ig-prof-grid-item { background: #1a1a2e; }

/* ── OVERLAYS ── */
.lcd-ig-sheet {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #262626; border-radius: 14px 14px 0 0;
    padding: 8px 10px 12px; z-index: 4;
    transform: translateY(100%);
    animation: lcd-sheet-up 8s ease-in-out infinite;
}
.lcd-ig-sheet-handle { width: 32px; height: 4px; background: #555; border-radius: 2px; margin: 0 auto 8px; }
.lcd-ig-sheet-title { font-size: 7px; font-weight: 600; color: #eee; text-align: center; margin-bottom: 8px; }
.lcd-ig-sheet-row {
    display: flex; gap: 10px; margin-bottom: 8px; justify-content: center;
}
.lcd-ig-sheet-app {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.lcd-ig-sheet-app-circle {
    width: 28px; height: 28px; border-radius: 50%;
}
.lcd-ig-sheet-app-circle.blue { background: #0088cc; }
.lcd-ig-sheet-app-circle.green { background: #25d366; }
.lcd-ig-sheet-app-circle.purple { background: #7c3aed; }
.lcd-ig-sheet-app-circle.gray { background: #555; }
.lcd-ig-sheet-app span { font-size: 5px; color: #999; }
.lcd-ig-sheet-sep { height: 1px; background: #333; margin-bottom: 4px; }
.lcd-ig-sheet-opt {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 4px; font-size: 8px; color: #ddd; border-radius: 6px;
}
.lcd-ig-sheet-opt svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.lcd-ig-sheet-opt.hl { animation: lcd-opt-hl 8s ease-in-out infinite; }

.lcd-ig-menu {
    position: absolute; top: 38px; right: 8px;
    background: #262626; border-radius: 10px;
    padding: 4px 0; min-width: 108px; z-index: 4;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    transform: scale(0); transform-origin: top right;
    animation: lcd-menu-pop 8s ease-in-out infinite;
}
.lcd-ig-menu-opt {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; font-size: 7px; color: #ddd;
}
.lcd-ig-menu-opt svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.lcd-ig-menu-opt.hl { animation: lcd-menuopt-hl 8s ease-in-out infinite; }

.lcd-ig-copied {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0);
    background: #22c55e; color: #fff;
    padding: 5px 10px; border-radius: 8px;
    font-size: 8px; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
    z-index: 5; white-space: nowrap;
    animation: lcd-copied 8s ease-in-out infinite;
}
.lcd-ig-copied svg { width: 12px; height: 12px; }

/* =====================
   PHASE 2 - SMARTFOLLOWER
   ===================== */
.lcd-sf {
    display: flex; flex-direction: column;
    height: 100%; background: #121212;
    border-radius: 18px;
}

/* Navbar */
.lcd-sf-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 8px 6px;
}
.lcd-sf-logo-img {
    height: 9px; width: 60px;
    background: var(--primary, #ea4c88);
    border-radius: 3px; opacity: 0.9;
}
.lcd-sf-nav-links { display: flex; gap: 4px; }
.lcd-sf-nav-link {
    font-size: 5px; color: #888;
    padding: 2px 4px; border-radius: 3px; border: 1px solid #333;
}
.lcd-sf-nav-link.primary { background: var(--primary, #ea4c88); color: #fff; border-color: transparent; }

/* Hero */
.lcd-sf-hero { text-align: center; padding: 6px 8px 4px; }
.lcd-sf-hero-title { font-size: 8px; font-weight: 700; color: #eee; margin-bottom: 2px; }
.lcd-sf-hero-sub { font-size: 5px; color: #888; }

/* Tab Navigation */
.lcd-sf-tabs {
    display: flex; margin: 6px 8px 0; border-radius: 6px 6px 0 0; overflow: hidden;
    background: #1e1e1e;
}
.lcd-sf-tab {
    flex: 1; font-size: 4.5px; color: #888; padding: 4px 0;
    text-align: center;
}
.lcd-sf-tab.active { background: var(--primary, #ea4c88); color: #fff; }

/* Searchbar (rosa Hintergrund wie echt) */
.lcd-sf-search-wrap {
    background: var(--primary, #ea4c88);
    margin: 0 8px; padding: 6px;
    border-radius: 0 0 6px 6px;
}
.lcd-sf-search {
    display: flex; height: 22px; border-radius: 4px; overflow: hidden;
    animation: lcd-sf-glow 8s ease-in-out infinite;
}
.lcd-sf-search-input {
    flex: 1; background: rgba(255,255,255,0.92); color: #333;
    font-size: 6px; padding: 0 5px;
    display: flex; align-items: center;
    white-space: nowrap; overflow: hidden;
    border-radius: 4px 0 0 4px;
}
.lcd-sf-search-input span {
    width: 0; overflow: hidden; display: block;
    animation: lcd-sf-type 8s ease-in-out infinite;
}
.lcd-sf-search-btn {
    padding: 0 8px; background: #1e1e1e;
    font-size: 5px; color: #fff; font-weight: 600;
    display: flex; align-items: center;
    border-radius: 0 4px 4px 0;
    opacity: 0; flex-shrink: 0;
    animation: lcd-sf-btn 8s ease-in-out infinite;
}

/* Ergebnis */
.lcd-sf-result {
    flex: 1; padding: 8px; opacity: 0;
    animation: lcd-sf-res 8s ease-in-out infinite;
}
.lcd-sf-res-profile {
    display: flex; align-items: center; gap: 6px;
    padding: 5px; background: #1e1e1e; border-radius: 6px; margin-bottom: 5px;
}
.lcd-sf-res-pic {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg,#2a2a4a,#3a3a5a);
}
.lcd-sf-res-info { flex: 1; }
.lcd-sf-res-name { font-size: 6px; font-weight: 600; color: #eee; }
.lcd-sf-res-stats { font-size: 5px; color: #888; margin-top: 1px; }
.lcd-sf-res-dl {
    padding: 3px 5px; background: var(--primary, #ea4c88);
    border-radius: 4px; font-size: 5px; color: #fff; font-weight: 600;
}
.lcd-sf-res-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 2px;
}
.lcd-sf-res-grid-item {
    background: #1e1e1e; border-radius: 2px; aspect-ratio: 1;
}

/* =====================
   KEYFRAMES
   ===================== */
@keyframes lcd-share-pulse {
    0%,10%{ stroke:#ccc; transform:scale(1) }
    14%,20%{ stroke:var(--primary,#ea4c88); transform:scale(1.3) }
    24%,100%{ stroke:#ccc; transform:scale(1) }
}
@keyframes lcd-dots-pulse {
    0%,10%{color:#888} 14%,20%{color:var(--primary,#ea4c88)} 24%,100%{color:#888}
}
@keyframes lcd-sheet-up {
    0%,18%{transform:translateY(100%)} 22%,44%{transform:translateY(0)} 48%,100%{transform:translateY(100%)}
}
@keyframes lcd-opt-hl {
    0%,30%{background:transparent;color:#ddd}
    34%,40%{background:rgba(234,76,136,0.15);color:#fff}
    44%,100%{background:transparent;color:#ddd}
}
@keyframes lcd-menu-pop {
    0%,18%{transform:scale(0)} 22%,44%{transform:scale(1)} 48%,100%{transform:scale(0)}
}
@keyframes lcd-menuopt-hl {
    0%,30%{background:transparent;color:#ddd}
    34%,40%{background:rgba(234,76,136,0.15);color:#fff}
    44%,100%{background:transparent;color:#ddd}
}
@keyframes lcd-copied {
    0%,42%{transform:translate(-50%,-50%) scale(0)}
    44%,50%{transform:translate(-50%,-50%) scale(1)}
    52%,100%{transform:translate(-50%,-50%) scale(0)}
}
@keyframes lcd-sf-type {
    0%,64%{width:0;color:#555} 70%,88%{width:105px;color:#ccc} 92%,100%{width:105px}
}
@keyframes lcd-sf-glow {
    0%,64%{border-color:#333} 70%,88%{border-color:var(--primary,#ea4c88)} 92%,100%{border-color:#333}
}
@keyframes lcd-sf-btn {
    0%,68%{opacity:0} 72%,90%{opacity:1} 94%,100%{opacity:0}
}
@keyframes lcd-sf-res {
    0%,78%{opacity:0} 82%,94%{opacity:1} 98%,100%{opacity:0}
}

@media (max-width:600px) {
    .link-copy-demo { width: 170px; height: 310px; padding: 8px; }
    .lcd-ig-prof-pic { width: 34px; height: 34px; }
}