body {
  font-family: system-ui, sans-serif;
  max-width: 600px;
  margin:auto;
  padding: 5px;
}

#chat-window {
  height: min-content;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  overflow-y: auto;
  background: #f9f9f9;
  margin-bottom: 15px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.input-group {
  display: grid;
  grid-template-areas:
    "AI AI AI AI AI AI AI Units";
  gap: 10px;
}
#removepadding{
  padding:0px;
}

#searchbox{
  display:grid;
  grid-template-areas: "Input Input Input Button" "Current Current Current Current";
  gap:10px;
}

#AIrequest {
  grid-area: AI;
}
#unitsButton {
  grid-area: Units;
}
#location-input {
  grid-area: Input;
  border-radius:4px;
}
#search-button {
  grid-area: Button;
}
#current-location-button{
  grid-area: Current;
}
#location-display{
  grid-area:Location;
  text-align:center;
  margin-top:0px;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}

button:hover {
  background: #0056b3;
}
#refreshdaybox {
  background-color: #007bff;
  color: white;
  align-content: center;
  font-weight: 900;
}
#refreshdaybox:hover {
  background-color: #0056b3;
}

.msg-user {
  color: #0056b3;
  margin-top: 10px;
}

.msg-ai {
  color: #333;
  margin-bottom: 10px;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 10px;
}

#seven-day-forecast {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 10px;
}

.daybox {
  height: min-content;
  border-radius: 10px;
  text-align: center;
  align-content: center;
  font-size:1em;
  padding:5px;
  color:rgba(255, 255, 255, 0.9);
}

.place-selection{
  background-color:#ccc;
  border-radius:5px;
  margin:5px;
  padding:2px;
}
.place-selection:hover {
  background-color:#808080;
}
#place-selection-cancel{
  background-color:#007bff;
  color:white;
  text-align:center;
}
#place-selection-cancel:hover{
  background-color:#0056b3;
}

#layer-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 5px;
  padding:5px;
}

#tempbtn{
  background-color:#0056b3;
}

#map{
  border-radius:4px;
}

.weather-widget, #sevenDayForecastBox {
    background-color: #0056b3;
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    border-radius: 8px;
    padding: 16px 0; 
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.widget-header {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    padding: 0 20px; 
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 24px;
    padding: 0 20px; 
    position: relative;
    
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.scroll-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.forecast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; 
    z-index: 2; 
    background-color: #0056b3;
}

.temp {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}

.icon {
    font-size: 20px;
    margin-bottom: 8px;
}

.wind {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
    white-space: nowrap;
}

.time {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}
#current-weather-display{
  font-size:4em;
  margin:0px;
}
#today-temperature-display{
  font-size:3em;
  margin-top:0px;
}