/* Fixes for Home UI requested by User */

/* --- Live 3D Green Orb --- */
.green-orb-3d {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background-image: url('/live-icon.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: pulseLightbulb 1.5s infinite alternate;
}
@keyframes pulseLightbulb {
  0% { filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.4)); transform: scale(0.95); }
  100% { filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.9)); transform: scale(1.08); }
}

.custom-home-ui {
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* Ensure the top icon bar is perfectly horizontal */
.fh-action-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: calc(100% - 20px) !important;
  max-width: 500px !important;
  min-height: 50px !important;
  margin: 0 auto 10px auto !important;
  position: relative !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.fh-action-bar button {
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
}

.fh-action-bar button svg {
  width: 22px !important;
  height: 22px !important;
}

/* The feature grid flows naturally between the two */
.fh-grid-scroll {
  flex: 1 1 auto !important; /* Take remaining space but allow shrink */
  width: 100% !important;
  overflow-y: auto !important; /* Scroll ONLY the grid if needed */
  overflow-x: hidden !important;
  min-height: 0 !important; /* Required for flex-based inner scrolling */
  margin-bottom: 10px !important; /* Small gap above chat input */
}

.custom-home-ui .features-grid {
  justify-content: center !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  max-width: 600px !important;
  padding: 0 5px !important;
  margin: 0 auto !important;
}

.custom-home-ui .feature-card {
  min-height: 70px !important;
  padding: 6px 4px !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
}

.custom-home-ui .feature-icon {
  font-size: calc(26px * var(--font-scale, 1)) !important;
  margin: 0 !important;
}

.custom-home-ui .feature-title {
  font-size: calc(12px * var(--font-scale, 1)) !important;
  line-height: 1.3 !important;
  white-space: pre-wrap !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Natural stacking for chat input at the bottom */
.custom-home-ui .input-area {
  display: flex !important;
  position: relative !important; /* NOT FIXED OVERLAY */
  max-width: 600px !important;
  width: 100% !important;
  margin: 0 auto 10px auto !important; /* Flush at bottom */
  padding: 0 !important;
  z-index: 100 !important;
  flex-shrink: 0 !important; /* Never shrink the input */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .fh-action-bar {
    padding: 6px !important;
    gap: 6px !important;
    min-height: 44px !important;
  }
  .fh-action-bar button {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 6px !important;
  }
  .fh-action-bar button svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  .custom-home-ui .features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* Back to 3 columns so text has more horizontal room to fit the larger fonts */
    gap: 6px !important;
    padding: 0 4px !important;
  }
  
  .custom-home-ui .feature-card {
    min-height: 65px !important; /* Allow more height for the larger text */
    padding: 6px 4px !important;
    gap: 4px !important;
  }
  
  .custom-home-ui .feature-icon {
    font-size: calc(22px * var(--font-scale, 1)) !important; 
  }

  .custom-home-ui .feature-title {
    font-size: calc(11px * var(--font-scale, 1)) !important; /* Much larger, readable text */
    line-height: 1.3 !important;
  }

  .custom-home-ui .input-area {
    margin-bottom: 20px !important; /* Small padding at very bottom for mobile navs */
  }

  /* Show mockup phone controls on real phones */
  .mockup-colors, .mockup-zoom {
    display: flex !important;
  }
}

/* 📱 GLOBAL LOGIN SCREEN SHRINK (Desktop & Mobile) */
.login-page .monitor-container {
  width: 130px !important;
  height: 110px !important;
  margin: 0px auto 10px auto !important;
}
.login-page .monitor-frame {
  width: 110px !important;
  height: 80px !important;
}
.login-page .premium-upgrade-btn {
  padding: 12px !important;
  font-size: 0.95rem !important;
}
.login-page .lp-title {
  font-size: 1.3rem !important;
  margin-bottom: 5px !important;
}
.login-page .lp-field {
  margin-bottom: 12px !important;
}
.login-page .lp-input {
  min-height: 42px !important;
  padding: 10px 14px !important;
}
.login-page .lp-social {
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
.login-page .lp-social-btn {
  padding: 10px !important;
  font-size: 0.85rem !important;
  min-height: 42px !important;
  flex: 1 !important;
}

/* 📱 UNIVERSAL 3D MOCKUP (Desktop & Mobile) - Make the login look like a professional White Mobile Device Frame */
@keyframes wavyFluid {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.login-page .login-card {
  width: 330px !important; /* Phone width */
  height: 700px !important; /* Phone height */
  max-width: 95vw !important; /* Scale to fit small screens */
  max-height: 85vh !important;
  border-radius: 46px !important;
  
  /* 3D Case Color */
  border: 14px solid var(--frame-color, #ffffff) !important;
  
  /* Hyper-realistic 3D Depth (Bezel + Surface Shadow) */
  box-shadow: 
    inset 0 0 0 7px #0f0f0f,        /* Inner screen black bezel */
    inset 0 0 3px 8px rgba(0,0,0,0.5), /* Bezel depth */
    0 0 0 2px rgba(0,0,0,0.05),     /* Outer case rim */
    0 35px 65px rgba(0,0,0,0.3) !important; /* Surface desktop shadow */
    
  position: relative;
  padding: 55px 22px 35px 22px !important;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 10px auto !important; /* Center on all screens */
  
  /* Realistic Wavy iOS-like Background with Glass Shine */
  background: 
    linear-gradient(105deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 100%), /* Static Glare / Reflection */
    linear-gradient(130deg, #f8fafc 0%, #e0f2fe 30%, #fdf4ff 70%, #fff7ed 100%) !important; /* Wavy bright liquid */
  background-size: 100% 100%, 300% 300% !important;
  animation: wavyFluid 12s ease infinite !important;
  
  transition: border-color 0.4s ease, transform 0.2s ease, box-shadow 0.4s ease;
  transform: scale(var(--mockup-scale, 1)) !important;
  transform-origin: center top !important;
}

[data-theme="dark"] .login-page .login-card {
  border-color: var(--frame-color, #ffffff) !important;
  background: 
    linear-gradient(105deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 100%),
    linear-gradient(130deg, #111827 0%, #2e1065 40%, #032541 75%, #022c22 100%) !important; 
  background-size: 100% 100%, 300% 300% !important;
}

/* iPhone 17 Dynamic Island */
.login-page .login-card::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #000000;
  border-radius: 20px;
  z-index: 999;
  /* Simulated Camera Lenses inside notch */
  box-shadow: 
    inset -6px 0 8px rgba(255,255,255,0.15),
    inset 6px 0 6px rgba(255,255,255,0.1),
    0 0 0 7px #0f0f0f; /* Blend with bezel */
}

/* Home indicator line at bottom */
.login-page .login-card::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 5px;
  background: #000;
  opacity: 0.6;
  border-radius: 10px;
  z-index: 100;
}
[data-theme="dark"] .login-page .login-card::after {
  background: #fff;
  opacity: 0.8;
}