/* ===========================
   GLOBAL
=========================== */

body {
  font-family: 'Segoe UI', sans-serif;
  background: radial-gradient(circle at top left, #0a0f1c 0%, #1a1f2c 40%, #222a3a 100%);
  color: #d9eaff;
  margin: 0;
}

#app {
  display: flex;
  height: 100vh;
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  background: linear-gradient(to bottom right, #0f1626, #1e2a3a);
  overflow: hidden;
}

#sidebar {
  overflow-y: auto;
  max-height: 100vh;
}

/* ===========================
   SIDEBAR BUTTON ENHANCEMENTS
=========================== */

.nav-btn {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #0f1a2e;
  color: #d9eaff;
  border: 1px solid #1f2d45;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-btn:hover {
  background: #16263d;
  border-color: #66ccff;
}

.nav-btn.active {
  background: #1e3555;
  border-color: #66ccff;
  color: #ffffff;
}

/* Optional: dedicated style for special sidebar buttons */
.sidebar-btn {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #1a2d45;
  color: #d9eaff;
  border: 1px solid #2f4d6d;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sidebar-btn:hover {
  background: #223b5c;
  border-color: #66ccff;
}

/* ===========================
   PANELS
=========================== */

#chat-panel,
#visual-panel {
  background: #121a2b;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(102, 204, 255, 0.1);
  padding: 16px;
  display: flex;
  gap: 12px;
}

#chat-panel {
  height: 45%;
  min-height: 220px;
  align-items: stretch;
}

#visual-panel {
  flex: 1;
  overflow: hidden;
}

/* ===========================
   UPLOAD PANEL
=========================== */

#upload-panel {
  background: #0f1a2e;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(102, 204, 255, 0.1);
  margin-bottom: 20px;
}

#upload-container h2 {
  color: #66ccff;
  margin-bottom: 8px;
}

#upload-container p {
  color: #b8d9ff;
  margin-bottom: 16px;
}

#upload-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

#csv-upload {
  color: #d9eaff;
}

#upload-button {
  background: #1a2d45;
  color: #66ccff;
  border: 1px solid #66ccff;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
}

#upload-button:hover {
  background: #223b5c;
  box-shadow: 0 0 8px rgba(102, 204, 255, 0.4);
}

.hidden {
  display: none;
}

/* ===========================
   MOBILE LAYOUT
=========================== */

@media (max-width: 768px) {

  /* Hamburger menu */
  #hamburger-menu {
    display: block;
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 1100;
  }

  #hamburger-toggle {
    background: none;
    border: none;
    font-size: 30px;
    color: #66ccff;
    cursor: pointer;
  }

  /* Sidebar fully hidden until toggled */
  #sidebar {
    display: none;
    position: fixed;
    left: -240px;
    top: 0;
    width: 240px;
    height: 100vh;
    background: #0a0f1c;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 1000;
    padding: 16px 12px;
  }

  #sidebar.open {
    display: flex;
    left: 0;
  }

  /* Shrink Kramer icon */
  #sidebar-kramer-icon {
    width: 30%;
    max-width: 80px;
  }

  /* Global title styling */
  #global-title {
    margin-top: 40px;
    text-align: center;
  }

  .title-line-1,
  .title-line-2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #66ccff;
  }

  /* Main content */
  #main {
    padding: 8px;
    gap: 8px;
    height: 100vh;
    overflow-y: auto;
  }

  /* Panels with reduced width */
  #chat-panel,
  #visual-panel {
    width: 92%;
    margin: 0 auto;
    padding: 12px;
    border-radius: 10px;
    flex-direction: column;
  }

  #chat-panel {
    flex: 0 0 26vh;
    max-height: 26vh;
    min-height: 140px;
    overflow-y: auto;
  }

  #visual-panel {
    flex: 1;
    max-height: none;
    min-height: 160px;
    overflow-y: auto;
    margin-top: 4px;
  }

  #chat-top-row {
    flex-direction: column;
  }

  #kramer-icon-container {
    margin: 0 auto 8px auto;
  }

  #chat-right-column {
    width: 100%;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
  }
}

/* Hide hamburger on desktop */
#hamburger-menu {
  display: none;
}

@media (max-width: 768px) {
  #hamburger-menu {
    display: block;
  }
}