/* ===== Status bar, Home e navegação ===== */

/* Status bar (relógio, clima, bateria) */
.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-weight: 800;
  color: #fff;
}

.status-left,
.status-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Área segura e Home */
.safe-area {
  position: absolute;
  inset: 48px 0 70px 0;
  /* top=status bar, bottom=navbar */
  display: flex;
  flex-direction: column;
}

.home-top {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-time {
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.home-sub {
  opacity: 0.9;
  font-weight: 700;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 18px;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.app-icon:active {
  transform: scale(0.95);
}

.app-glyph {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.app-glyph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.chat-green {
  background: #22c55e;
  color: #053b18;
}

.weather-blue {
  background: #60a5fa;
  color: #06223a;
}

.gallery-pink {
  background: #f472b6;
  color: #3d0f26;
}

/* Navbar inferior */
.navbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #fff;
  opacity: 0.8;
}

/* ===== Gallery (app da Home) ===== */
#viewGallery {
  /* mesmo “vidro escuro” das outras views */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.32) 14%,
    rgba(0, 0, 0, 0.48) 100%
  );
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden; /* evita “vazar” largura */
}

#viewGallery .safe-area,
#viewGallery {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

#galleryList {
  /* grade responsiva e scroll interno */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  /* ocupa toda a área útil da view (sob o header do app, se houver) */
  height: 100%;
  align-content: start;
}