/* ========== MAPMYCAM - ORGANIZED CSS IMPORTS ========== */

/* Core Styles */
/* @import url('core/reset.css'); */ /* Future: CSS reset */
/* @import url('core/layout.css'); */ /* Future: Main layout */
/* @import url('core/typography.css'); */ /* Future: Typography */

/* Component Styles */
@import url('components/navigation.css');
@import url('components/sidebar.css');
@import url('components/popup.css');
@import url('components/comments.css');
@import url('components/auth.css');
@import url('components/heat-buttons.css');

/* Feature Styles */
@import url('features/floating-video.css');
/* @import url('features/share-buttons.css'); */ /* Future extraction */

/* Mobile Styles */
@import url('mobile/hamburger-menu.css');
@import url('mobile/mobile-filters.css');
@import url('mobile/mobile-chat-fab.css');
@import url('mobile/mobile-responsive.css');

/* Utility Styles */
@import url('utilities/animations.css');
@import url('utilities/buttons.css');
@import url('utilities/themes.css');

/* ========== CORE LAYOUT (Temporary - to be extracted) ========== */

/* Reset & Basic Layout */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* Main Container */
.main-container {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
}

/* Map */
#map {
  flex: 1;
  height: 100%;
}

/* Chat Container */
.chat-container {
  width: 350px;
  background-color: #f4f4f4;
  border-left: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.chat-header {
  padding: 10px;
  background-color: #007bff;
  color: white;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  flex-shrink: 0;
}

.chat-embed-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.chat-embed-wrapper iframe,
.chat-embed-wrapper script {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ========== CSS ORGANIZATION COMPLETE ========== */
/*
File Structure:
styles/
├── styles.css (this file - main imports)
├── components/
│   ├── navigation.css
│   ├── sidebar.css
│   ├── popup.css
│   ├── comments.css
│   ├── auth.css
│   └── heat-buttons.css
├── features/
│   └── floating-video.css
├── mobile/
│   ├── hamburger-menu.css
│   ├── mobile-filters.css
│   ├── mobile-chat-fab.css
│   └── mobile-responsive.css
└── utilities/
    ├── animations.css
    ├── buttons.css
    └── themes.css

Future extractions:
- core/reset.css
- core/layout.css
- core/typography.css
- features/share-buttons.css
*/