/* =========================================================
   Instagram-nahes Lightmode Theme (Mobile-First überall)
   ========================================================= */
:root{
  /* Farben */
  --ig-bg: #ffffff;
  --ig-surface: #ffffff;
  --ig-surface-2: #fafafa;
  --ig-border: #dbdbdb;
  --ig-text: #262626;
  --ig-muted: #8e8e8e;
  --ig-primary: #000000;
  --ig-link: #000000;
  --ig-badge: #ff3040;
  --ig-like: #ed4956;
  --ig-heart-size: 120px;

  /* Layout */
  --ig-radius: 12px;
  --ig-gap: 12px;
  /* Mobile Breite auch auf Desktop beibehalten */
  --ig-container: 620px;

  /* Bottom Appbar (mobile-gleich, überall sichtbar) */
  --ig-appbar-height: 64px;
  --ig-appbar-item: 56px;
  --ig-appbar-icon: 26px;

  /* Typo */
  --ig-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  background: var(--ig-bg);
  color: var(--ig-text);
  font-family: var(--ig-font);
}
a { color: var(--ig-link); text-decoration: none; }
a:hover { opacity: .85; }

/* Zentrale Breite (Mobile-Feed auch auf Desktop) */
.container { max-width: var(--ig-container); }

/* Dezente Ränder */
.border-secondary { border-color: var(--ig-border) !important; }
hr, .modal-content, .card, .list-group-item { border-color: var(--ig-border) !important; }

/* Body-Padding für Bottom-Appbar (immer, auch Desktop) */
body { padding-bottom: calc(var(--ig-appbar-height) + env(safe-area-inset-bottom)); }

/* =========================================================
   Header / Topbar (IG-ähnlich)
   ========================================================= */
.header-wrap{
  border-bottom:1px solid var(--ig-border);
  background:#fff;
  backdrop-filter:saturate(180%) blur(6px);
}
.header-wrap .container{ flex-wrap:wrap; align-items:center; gap:14px; }

.header-brand{ text-decoration:none; }
.brand-logo{ height:34px; width:auto; display:block; }
/* kein Desktop-Upscaling – überall gleich große Logo-Höhe */

/* Top-Actions (rechte Icon-Reihe) */
.top-actions .icon-link,
.icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  color:#262626; background:#fff; border:1px solid #e6e6e6;
}
.top-actions .icon-link:hover{ background:#f7f7f7; }
.top-actions i{ font-size:18px; line-height:1; }

/* Button-Reset für Dropdown-Trigger mit Icon */
.btn-reset{ border:0; background:transparent; padding:0; }

/* Suche (mobil-styled, unter der Icon-Zeile) */
.header-search{
  max-width:520px; width:100%;
  background:#efefef; border:1px solid #e6e6e6; border-radius:999px;
  padding:.52rem 1rem;
}

/* Live-Suchergebnisse unter der Topbar */
#searchResults{ position:relative; z-index:1030; max-width:100%; }
#searchResults .list-group-item{ border-left:0;border-right:0; }

/* =========================================================
   Bottom Appbar (immer sichtbar, mobile-gleich)
   ========================================================= */
.ig-appbar{
  background:#fff;
  border-top:1px solid var(--ig-border) !important;
  min-height: var(--ig-appbar-height);
  padding-bottom: env(safe-area-inset-bottom);
}
.ig-appbar .container{ min-height: var(--ig-appbar-height); }
.ig-appbar .nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  width: var(--ig-appbar-item); height: var(--ig-appbar-item);
  color:var(--ig-text); position:relative; cursor:pointer;
}
.ig-appbar .nav-link i{ font-size: var(--ig-appbar-icon); }
.ig-appbar .nav-link img{ width: var(--ig-appbar-icon); height: var(--ig-appbar-icon); object-fit:cover; border-radius:50%; background:#eee; }
.ig-appbar .nav-link.active::after{
  content:''; position:absolute; bottom:6px; width:24px; height:2px; border-radius:2px; background: var(--ig-text);
}
.badge-ig{
  position: absolute; top: 4px; right: 4px;
  background: var(--ig-badge); color: #fff; border-radius: 999px;
  font-size: 10px; line-height: 1; padding: 3px 6px; min-width: 18px; text-align: center;
}
/* Roter Dot (DM) */
.badge-dot{
  top:6px; right:6px;
  width:10px; height:10px;
  padding:0; min-width:0;
  border-radius:999px; background:#ff3040; font-size:0; line-height:0;
}

/* =========================================================
   Stories (Avatar-Ringe)
   ========================================================= */
.stories{
  display:flex; gap:14px; padding:12px 0; overflow-x:auto; scrollbar-width:none;
}
.stories::-webkit-scrollbar{ display:none; }
.stories .story{ display:inline-flex; flex-direction:column; align-items:center; width:auto; text-align:center; }
.story-ring{
  position:relative; width:70px; height:70px; border-radius:999px; display:grid; place-items:center;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.story-ring::after{ content:''; position:absolute; inset:3px; border-radius:999px; background:#fff; z-index:0; }
.story-avatar{ position:relative; z-index:1; width:62px; height:62px; object-fit:cover; border-radius:999px; background:#eee; }
.story-ring.seen{ background:#dbdbdb; }
.story-ring.add{ background:#dbdbdb; }
.story-ring.add::after{ background:#fff; }
.story-ring.add svg{ position:relative; z-index:1; }
.story-username{ color: var(--ig-muted); font-size:.85rem; margin-top:6px; max-width:76px; overflow:hidden; text-overflow:ellipsis; }

/* =========================================================
   Cards / Feed
   ========================================================= */
.card{ background:var(--ig-surface); border:1px solid var(--ig-border); border-radius:var(--ig-radius); box-shadow:none; }
.card-header{ background:var(--ig-surface); border-bottom:1px solid var(--ig-border); }
.card-body{ background:var(--ig-surface); }

.post-card{
  background:var(--ig-surface);
  border:1px solid var(--ig-border);
  border-radius:12px;
  overflow:hidden;
}
.post-card .card-header{ border:0; padding:10px 12px; }
.post-card .card-body{ padding:10px 12px 12px; }
.post-card .text-muted.small { color: var(--ig-muted) !important; }

.post-image, .post-media{
  background: var(--ig-surface-2);
  object-fit: cover;
  width: 100%; height: auto; max-height: 680px;
  display: block; touch-action: manipulation; cursor: pointer;
}

.carousel-control-prev-icon, .carousel-control-next-icon{ filter: invert(1) grayscale(1); }
.timeago, .post-card .card-header .small{ color: var(--ig-muted) !important; }

/* =========================================================
   Buttons
   ========================================================= */
.btn-outline-light{ border-color: var(--ig-border); color: var(--ig-text); background: transparent; }
.btn-outline-light:hover{ background: #fafafa; color: var(--ig-text); }

.btn-light{ background: #fafafa; color: #000; border: 1px solid var(--ig-border); }
.btn-light:hover{ background: #f0f0f0; }

.icon-btn{ background:transparent; border:0; padding:6px; color:var(--ig-primary); display:inline-flex; align-items:center; justify-content:center; }
.icon-btn svg{ width:28px; height:28px; }

/* Like-Button Zustände (SVG & FA) */
.icon-btn.like-btn svg{ width:28px; height:28px; transition: transform .2s ease, fill .2s ease, stroke .2s ease; }
.icon-btn.like-btn svg path{ fill: none; stroke: currentColor; stroke-width: 2; }
.icon-btn.like-btn.is-liked svg path{ fill: var(--ig-like); stroke: var(--ig-like); stroke-width: 0; }
.icon-btn.like-btn.is-liked i { color: var(--ig-like); }
.icon-btn.like-btn.is-liked svg{ animation: heart-pop .25s ease; }
@keyframes heart-pop{ 0%{transform:scale(.8)}50%{transform:scale(1.2)}100%{transform:scale(1)} }

/* Double-Tap Herz Overlay */
.post-media-wrap, .post-detail__media{ position: relative; }
.like-heart-overlay{
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease;
  font-size: var(--ig-heart-size); line-height: 1; color: rgba(255,255,255,.95);
  text-shadow: 0 6px 20px rgba(0,0,0,.35); will-change: opacity, transform;
}
.like-heart-overlay.show{ opacity: 1; transform: scale(1); animation: ig-heart-pop .35s ease-out both; }
.like-heart-overlay.fade{ opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .35s ease; }
@keyframes ig-heart-pop{ 0%{transform:scale(.7)}70%{transform:scale(1.1)}100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce){
  .like-heart-overlay, .like-heart-overlay.fade, .like-heart-overlay.show{ transition:none!important; animation:none!important; }
}

/* =========================================================
   Post-Detail (immer 1-spaltig, mobile-gleich)
   ========================================================= */
.post-detail{
  display:grid; grid-template-columns: 1fr;
  gap:0; border:1px solid var(--ig-border); background:#fff; border-radius:12px; overflow:hidden;
}
.post-detail__media{ position:relative; background:#000; }
.post-detail__side{ background:#fff; display:flex; flex-direction:column; min-height:60vh; padding:12px; }
.post-detail__side .pd-header{ padding:12px; border-bottom:1px solid var(--ig-border); background:#fff; }
.post-detail__side .pd-comments{ flex:1; overflow-y:auto; padding:12px; background:#fff; max-height:55vh; }
.post-detail__side .pd-comment{ margin-bottom:10px; line-height:1.35; }
.post-detail__side .pd-actions{ border-top:1px solid var(--ig-border); padding:12px; background:#fff; }
.post-media{ display:block; width:100%; height:auto; object-fit:contain; max-height:70vh; margin:0 auto; background:#000; }

/* =========================================================
   Profil (Tabs & Grid)
   ========================================================= */
.profile-page h2, .profile-page h5{ font-weight:600; }
.profile-page img.rounded-circle{ border:1px solid #ddd; }
.profile-page .btn-outline-dark{
  border-radius:6px; font-size:.875rem; font-weight:500; padding:2px 12px;
  border-color:#dbdbdb; color:#262626;
}
.profile-page .btn-outline-dark:hover{ background:#fafafa; }

.ig-tabs{
  display:flex; justify-content:center; gap:40px; border-top:1px solid var(--ig-border); margin-top:12px;
}
.ig-tabs .tab-link{
  display:inline-flex; align-items:center; gap:6px; padding:12px 0; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ig-muted); border-top:1px solid transparent;
}
.ig-tabs .tab-link svg{ width:12px; height:12px; }
.ig-tabs .tab-link.active{ color:var(--ig-text); border-top-color:var(--ig-text); }
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

.profile-grid{ margin-top:12px; }
.profile-grid .tile{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#f2f2f2; }
.profile-grid .tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-grid .tile .overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:14px; opacity:0; transition:opacity .15s ease-in-out; background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.15));
}
.profile-grid .tile:hover .overlay{ opacity:1; }
.profile-grid .overlay .count{
  color:#fff; font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:6px;
}

/* =========================================================
   DM / Messages
   ========================================================= */
#dmList{
  height:60vh; overflow-y:auto; padding:10px; background:#fafafa;
  border:1px solid var(--ig-border); border-radius:12px;
}
.dm-msg .bubble{
  background:#f1f1f1; border:1px solid var(--ig-border); border-radius:16px; padding:8px 12px; display:inline-block; max-width:80%;
}
.dm-msg.mine .bubble{ background:#eaeaea; }

/* Utilities */
.small-muted{ color: var(--ig-muted); }

/* Carousel Dots */
.ig-carousel .ig-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px; }
.ig-carousel .ig-dots button{ width:6px; height:6px; border-radius:999px; border:0; background:rgba(255,255,255,.6); padding:0; }
.ig-carousel .ig-dots button.active{ background:#fff; width:7px; height:7px; }

/* Caption „mehr“ */
.caption-more{ color:#8e8e8e; font-size:.9rem; }
.caption-more:hover{ text-decoration:underline; }

/* Save-Button (lokal) – klarer Zustand: Outline vs. Fill */
/* Save-Button: Default = Outline, gespeichert = gefüllt */
.save-btn svg path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform .15s ease, fill .2s ease, stroke .2s ease;
}
.save-btn.is-saved svg path{
  fill: currentColor;
  stroke-width: 0;
}
.save-btn:active{ transform: scale(.96); }

/* --- Image Tags --- */
.post-media-wrap { position: relative; }
.tag-overlay { position:absolute; inset:0; pointer-events:none; display:none; }
.post-card.show-tags .tag-overlay,
.post-detail.show-tags .tag-overlay { display:block; }

.tag-overlay .tag { position:absolute; transform: translate(-50%, -100%); pointer-events:auto; z-index:2; }
.tag .bubble{ background: rgba(0,0,0,.78); color:#fff; padding:4px 8px; border-radius: 12px; font-size:12px; white-space:nowrap; }
.tag .dot{ position:absolute; left:50%; top:100%; transform: translate(-50%, 6px); width:8px; height:8px; background:#fff; border:2px solid #000; border-radius:50%; }
.tag .remove { display:none; margin-left:6px; cursor:pointer; color:#ffccd2; }
.post-card.tagging-active .tag .remove, .post-detail.tagging-active .tag .remove { display:inline; }

.tag-hint{ position:absolute; left:50%; top:10px; transform:translateX(-50%); background:#000; color:#fff; padding:4px 8px; border-radius:8px; font-size:12px; display:none; z-index:3; }
.post-card.tagging-active .tag-hint { display:block; }

/* Alternative Tag-Bubbles (Detail) */
.post-detail__media { position: relative; }
.tag-bubble { position: absolute; transform: translate(-50%, -110%); background: rgba(0,0,0,.82); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 1.2; white-space: nowrap; pointer-events: auto; }
.tag-bubble::before { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(0,0,0,.82); }
.tag-bubble .x { margin-left: 8px; opacity: .7; cursor: pointer; font-weight: 600; }
.tag-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(0,0,0,.55); color: #fff; padding: 4px 8px; border-radius: 999px; font-size: 12px; display: none; }
body.is-tagging .tag-hint { display: block; }

/* ===== Profil: Kopfbereich kompakt & IG-artig ===== */
.profile-head{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:22px;
  align-items:center;
  margin:14px 0 6px;
}
@media (max-width: 480px){
  .profile-head{ grid-template-columns: 88px 1fr; gap:16px; }
}
.profile-head .avatar{
  width:110px; height:110px; border-radius:50%;
  object-fit:cover; background:#eee; border:1px solid #dbdbdb;
}
@media (max-width: 480px){
  .profile-head .avatar{ width:88px; height:88px; }
}
.profile-meta .meta-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.profile-meta .username{
  font-size:1.25rem; font-weight:700; margin:0;
}
.profile-meta .actions{ display:flex; gap:8px; flex-wrap:wrap; }

.profile-head .counts{
  display:flex; gap:28px; margin:6px 0 4px;
}
.profile-head .count{ text-align:center; }
.profile-head .count .num{ font-weight:700; font-size:1.05rem; line-height:1.1; }
.profile-head .count .label{ color:var(--ig-muted); font-size:.85rem; }

.profile-head .name{ font-weight:600; margin-top:2px; }
.profile-head .bio{ white-space:pre-wrap; color:#333; font-size:.95rem; }

/* Tabs bleiben wie definiert – nur optisch etwas straffer */
.ig-tabs{ margin-top:10px; }