body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; background: #1a1a1a; }
#app-container { display: flex; height: 100vh; width: 100vw; }

/* Mapa */
#map { flex: 1; transition: flex 0.5s ease-in-out; z-index: 1; }

/* Panel s fotkou */
#photo-panel { width: 0; flex: 0; background: #111; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: flex 0.5s ease-in-out, padding 0.5s ease-in-out; padding: 0; }
#app-container.split-view #map { flex: 0.4; }
#app-container.split-view #photo-panel { flex: 0.6; padding: 20px; }

/* Obsah panelu */
#enlarged-photo { max-width: 90%; max-height: 75vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); object-fit: contain; transition: opacity 0.3s; }
.photo-info { text-align: center; margin-bottom: 20px; width: 100%; white-space: nowrap; }
.photo-info h2 { margin: 0 0 5px 0; font-size: 24px; }
.photo-info p { margin: 0; color: #aaa; }
#close-btn { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.1); color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background 0.2s; z-index: 10; }
#close-btn:hover { background: rgba(255,255,255,0.3); }
.nav-hints { margin-top: 20px; color: #666; font-size: 14px; white-space: nowrap; }

/* Styly pro markery na mapě */
.photo-marker { display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s; }
.photo-marker:hover { transform: scale(1.2); z-index: 1000 !important; }
.marker-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.8); }
.marker-thumb { display: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; border: 3px solid; box-shadow: 0 3px 8px rgba(0,0,0,0.6); }

/* Přepínání teček na náhledy při přiblížení */
.map-zoomed .marker-dot { display: none; }
.map-zoomed .marker-thumb { display: block; }

/* Zvýraznění aktivní fotky */
.photo-marker.active-marker .marker-thumb { border-color: white !important; transform: scale(1.4); z-index: 1001 !important; box-shadow: 0 0 15px white; }
.photo-marker.active-marker .marker-dot { border-color: white; transform: scale(1.5); box-shadow: 0 0 10px white; }