/* --- iOS App Store Modal Realism Enhancements --- */
.gemini-modal-window {
  position: absolute;
  width: 96%;
  left: 50%;
  transform: translateX(-50%);
  max-height: 91.5%;
  padding: 28px 22px 22px 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 40px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.10);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 24px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  top: 2%;
  font-family: 'SF Pro Display', 'Segoe UI', Arial, sans-serif;
  transition: box-shadow 0.2s, background 0.2s;
}
.gemini-modal-window::-webkit-scrollbar {
  display: none;
}
.modal-app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  margin-top: 2px;
}
.modal-app-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  background: #f7fafd;
  flex-shrink: 0;
}
.modal-app-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gemini-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #18191c;
}
.gemini-modal-subtitle {
  margin: 3px 0 0;
  font-size: 14px;
  color: #6b6b6f;
  font-weight: 500;
}
.gemini-modal-body {
  margin-top: 6px;
  margin-bottom: 6px;
  padding-bottom: 2px;
  line-height: 1.62;
  color: #232325;
}
.gemini-modal-body h3, .gemini-modal-body .section-title {
  color: #1a73e8;
  font-size: 1.08em;
  font-weight: 700;
  margin: 18px 0 8px 0;
  letter-spacing: 0.01em;
}
.gemini-modal-body ul {
  margin: 8px 0 16px 22px;
  padding: 0;
  list-style: disc inside;
}
.gemini-modal-body li {
  margin-bottom: 5px;
  font-size: 15px;
  color: #232325;
}
/* App Store–style modal header */
.modal-app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.modal-app-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px; /* like iOS app icon */
  flex-shrink: 0;
}

.modal-app-text {
  display: flex;
  flex-direction: column;
}

.gemini-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.gemini-modal-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: #6b6b6f;
}
.gemini-links {
  margin-top: 18px;
  text-align: center;
  font-size: 15px;
}
.gemini-link {
  color: #007aff;
  text-decoration: none;
  font-weight: 600;
  padding: 0 8px;
  transition: color 0.15s;
}
.gemini-link:hover {
  color: #0051a8;
  text-decoration: underline;
}
.gemini-link-sep {
  color: #bbb;
  font-weight: 400;
  padding: 0 2px;
}
/* Full-screen App Store modal for GeminEye */
.gemini-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.gemini-modal-backdrop {
  display: none;
}
.gemini-modal-window {
  background: #fff;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.gemini-modal-window::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */

  padding: 32px 0 0 0;
  display: flex;
  flex-direction: column;
}
.gemini-modal-close {
  position: absolute;
  top: 18px;
  right: 24px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;
}
.gemini-modal-body {
  padding: 0 24px 32px 24px;
  width: 100%;
  box-sizing: border-box;
  color: #111;
}
.gemini-modal-title {
  margin-top: 0;
  font-size: 2rem;
  font-weight: 700;
  color: #000000;
}
.gemini-modal-subtitle {
  font-size: 1.1rem;
  color: #000000;
  margin-bottom: 1rem;
}
.hidden {
  display: none !important;
}
/* Overall page */
body {
  margin: 0;
  height: 100vh;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    sans-serif;
}

/* Phone wrapper */
.phone {
  position: relative;
  width: 360px; /* adjust for your phone.png size if needed */
}

/* Phone image (frame + wallpaper) */
.phone-img {
  width: 150%;
  display: block;
}

/* Area that matches the inner screen of the phone */
.screen {
  position: absolute;
  top: 8%;      /* tweak these four values so the content lines up perfectly */
  left: 42%;
  width: 68.5%;
  height: 82%;
  color: rgb(235, 225, 225);
}

.files {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.files-image {
  width: 212%;
  height: auto;
  border-radius: 15px;
  margin-top: -6%;
}
#notesApp .files-image {
  position: absolute;
  top: -8%;   /* example: move up */
  left: -57%;   /* example: move right */
  width: 212%;
}

/* background (files1.png) inside Notes */
#notesApp .notes-bg {
  position: absolute;
  top: -10%;      /* move up */
  left: -56%;    /* move sideways */
  width: 212%;   /* same scale you liked */
  z-index: 1;
}
.calendar-screen {
  position: absolute;
  inset: 0;
 
}

.calendar-bg {
  position: absolute;
  inset: 0;            /* fills entire screen area */
  width: 141%;
  height: 118%;
  object-fit: cover;   /* perfect full-screen scaling */
  border-radius: 18px; /* match phone curve */
  z-index: 1;
  margin: 0;    
  transform: translateX(-52px) translateY(-67px);
   /* move left */
  padding: 0;
}

.calendar-accs-btn {
  position: absolute;
  bottom: 24%;   /* moves it upward inside the white card */
  right: -12%;    /* moves it from right */
  width: 20%;
  height: 50%;
  object-fit: contain;
  cursor: pointer;
  z-index: 3;
}

.calendar-overlay {
  position: absolute;
  top: 4%;
  left: -12%;
  width: 106%;
  height: 84%;
  padding: 20px;
  background: rgba(255, 255, 255); 
  overflow-y: auto;
  border-radius: 16px;
  z-index: 1
}
.calendar-overlay {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}

.calendar-overlay::-webkit-scrollbar {
  display: none;              /* Chrome/Safari */
}
.calendar-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #111;
}

.calendar-card {
  position: absolute;
  top: 16%;      /* move box down */
  left: 10%;     /* inset from sides */
  right: 10%;
  bottom: 18%;   /* leave space for home bar */
  background: #ffffff;
  border-radius: 24px;
  padding: 16px 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  z-index: 9999;    /* above files1.png */
}
.calendar-item {
  margin-bottom: 18px;
  padding-bottom: 1px;
  border-bottom: 1px solid #ddd;
}

.calendar-date {
  font-size: 20px;
  font-weight: 600;
  color: #222;
}

.calendar-desc {
  font-size: 16px;
  color: #555;
  margin-top: 5px;
}

.calendar-img {
  width: 100%;
  margin-top: 10px;
  border-radius: 12px;
  object-fit: cover;
}

/* Fullscreen dark background */
.img-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

/* Hide by default */
.hidden {
  display: none !important;
}

/* Fullscreen image */
.viewer-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  object-fit: contain;
  animation: zoomIn 0.2s ease;
}

/* Smooth open animation */
@keyframes zoomIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.experience-overlay {
  position: absolute;
  left: -19%;
  right: -19%;
  top: -5%;
  bottom: 0;
  background: transparent;   /* keep notewall look; the content itself will be white */
  z-index: 3;                /* ⬅ put it ABOVE notes-wall */
  overflow: hidden;
}


.experience-header {
  position: absolute;
  top: 60px;
  left: 15px;
  z-index: 9999;
}

.experience-back-btn {
  width: 30%;
  height: auto;
  cursor: pointer;
  object-fit: contain;
  margin-left: 10px;
}


.experience-content {
  position: absolute;
  top: 60px;        
  left: 20px;        
  right: 20px;
  bottom: 20px;

  background: #ffffff;
  border-radius: 18px;

  padding: 16px 18px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  color: #000000;

  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;


}

.experience-content::-webkit-scrollbar {
  display: none;
}




.experience-content::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}


/* Make fonts bigger and clean like iOS Notes */
.experience-title {
  font-size: 32px;         /* big title */
  font-weight: 700;
  margin-bottom: 18px;
  color: #111;
}

/* Job role (bold) */
.exp-role {
  font-size: 18px;         /* bigger */
  font-weight: 700;
  color: #111;
}

/* Company name */
.exp-company {
  font-size: 14px;         /* slightly bigger */
  color: #777;
  margin-bottom: 6px;
}

/* Bullet list text */
.exp-text li {
  font-size: 16px;         /* bigger bullets */
  line-height: 1.55;
  margin-bottom: 8px;
  color: #000;
}

/* Logos */
.exp-logo {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* Whole card padding */
.exp-card {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* overlay (notewall.png) on top */
#notesApp .notes-wall {
  position: absolute;
  top: 4%;
  left: -10%;
  width: 120%;       /* match bg so it fully covers */
  height: auto;
  z-index: 2;        /* sits ABOVE background */
  pointer-events: none;
}

/* white background */
#skillsScreen .skills-blank {
  position: absolute;
  inset: 0;
  background: #ffffff;
}

/* content wrapper */
#skillsScreen .skills-content {
  position: absolute;
  top: 60px;
  left: 20px;
  right: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* title styling like iOS Notes */
.skills-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* skills list */
.skills-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #333;
}

.skills-list li {
  padding: 6px 0;
  border-bottom: 1px solid #eaeaea;
}

/* same home button used in Files + Notes */
.accs-icon {
  position: absolute;
  bottom: 20px;   /* adjust where you want it */
  right: 20px;
  width: 44px;
  height: 44px;
  z-index: 10;    /* > 2, so above notes-wall */
}

.appstore-image {
  width: 221%;
  height: auto;
  margin-left: -63%;
  margin-top: -32%;
  border-radius: 15px;
}
.appstore-accs {
  position: absolute;      /* ✅ relative to .appstore */
  bottom: 8%;              /* tweak to place inside phone frame */
  right: 8%;
  width: 22%;              /* scale similar to .accs-icon */
  z-index: 2000;
  opacity: 0.9;
  border-radius: 50%;
  cursor: pointer;
}


.bw-screen {
  position: absolute;
  top: 2%;
  left: -10%;
  width: 122%;
  height: 97%;            /* <-- REQUIRED for scrolling */
  background: white;
  border-radius: 20px;
  overflow-y: auto;        /* <-- THIS MAKES IT SCROLL */
  z-index: 10;
  scrollbar-width: none;
}

     /* shows above emptyscreen */


/* resume icon at top-left */
.resume-icon {
  position: absolute;
  /* tweak these numbers until it looks perfect inside the phone */
  top: 24%;   /* distance from top of the phone screen */
  left: -11%;  /* distance from left edge */
  width: 42%; /* icon size */
  height: auto;
}
/* ---------------- LOCK SCREEN ---------------- */

.lock-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 16px 8px 28px;
  box-sizing: border-box;
}

.lock-top {
  margin-top: 40px;
}

.lock-time {
  font-size: 48px;
  font-weight: 600;
}

.lock-date {
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.9;
}

.lock-bottom {
  font-size: 13px;
  opacity: 0.85;
}

/* Unlock animation */
.slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-30%);
    opacity: 0;
  }
}

.hidden {
  display: none;
}

/* ---------------- HOME SCREEN ---------------- */

.home-screen {
  position: relative;
}
.accs-icon {
  position: absolute;
  top: 60%;      
  left: 94%;   
  width: 20%;  
  cursor: pointer;
  opacity: 0.9;   
  border-radius: 50%;
}
.accss-icon {
  position: absolute;
  top: 60%;      
  left: 93%;   
  width: 20%;  
  cursor: pointer;
  opacity: 0.9;   
  border-radius: 50%;
  z-index: 10;
}


/* STATUS BAR */

.statusbar {
  position: absolute;
  top: 4px;
  left: -1%;
  right: 0%;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 4px;
  box-sizing: border-box;

  font-size: 12px;
  color: #fff;
}

.sb-left {
  font-weight: 600;
}

.sb-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* signal bars */
.sb-signal span {
  display: inline-block;
  width: 2px;
  margin-right: 1px;
  border-radius: 2px;
  background: #fff;
}
.sb-signal span:nth-child(1) { height: 4px; opacity: 0.4; }
.sb-signal span:nth-child(2) { height: 6px; opacity: 0.6; }
.sb-signal span:nth-child(3) { height: 8px; opacity: 0.8; }
.sb-signal span:nth-child(4) { height: 10px; opacity: 1; }



/* battery */
.sb-battery {
  position: relative;
  width: 22px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  padding: 1px;
  box-sizing: border-box;
}

.sb-battery-level {
  width: 70%; /* fake battery % */
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
}

.sb-cap {
  position: absolute;
  right: -3px;
  width: 3px;
  height: 5px;
  background: #ffffff;
  border-radius: 1px;
}
/* Status bar inside the App Store screen */
/* App Store status bar inside bw-screen */
.statusbar-app {
  top: 0;          /* override the -1% / 4px from .statusbar */
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: rgb(238, 238, 238);
  z-index: 50;  
  color: #111;   /* keep it above content */
}



/* ICON GRID */

.icons {
  position: absolute;
  top: 60px; /* space under status bar */
  left:2%;
  width: 82%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 23%;
  justify-items: center;
}

.icon {
  width: 300%;
  height: 100%;
  
}
.appstore-content {
  padding: 20px;
  font-size: 13px;
  color: #111;
}

.appstore-content {
  padding: 20px;
  font-size: 13px;
  color: #111;
}

/* Header: icon + title, clickable */
.appstore-topbar {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #111;
  background: white;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  z-index: 50;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
/* Reuse this if not already set */
.hidden {
  display: none;
}

/* Full-screen overlay inside the App Store app */
.gemini-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50; /* above appstore content */
}

/* Dim background */
.gemini-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* The small transparent white window */
.gemini-modal-window {
  position: absolute;
  width: 110%;          /* ⬅ wider modal */
  left: 49%;           /* center horizontally */
  transform: translateX(-50%);
  
  max-height: 91.5%;
  padding: 20px;

  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 22px;

  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  top: 2%;
}

.gemini-modal-window::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */

  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9); /* semi-transparent white */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px); /* nice iOS effect if supported */
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px;
}

/* Close button (top-right X) */
.gemini-modal-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

/* Text styles inside modal */
.gemini-modal-title {
  margin: 0 0 2px 0;
  font-size: 15px;
  font-weight: 600;
}

.gemini-modal-subtitle {
  margin: 0 0 8px 0;
  font-size: 11px;
  color: #555;
}

.gemini-modal-body ul {
  padding-left: 16px;
  margin-top: 8px;
}

.gemini-modal-body li {
  margin-bottom: 4px;
}

.gemini-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}

.gemini-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
}

.gemini-title-block h1.app-title-main {
  margin: 0;
  font-size: 18px;
}

.gemini-title-block .app-subtitle-main {
  margin: 4px 0 0;
  font-size: 12px;
  color: #555;
}

/* iOS App Store GET button */
.get-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  height: 32px;
  min-width: 64px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  color: #007aff;
  background: #f4f6fb;
  border: 1.5px solid #007aff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  outline: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.08s;
  user-select: none;
  vertical-align: middle;
  line-height: 1;
}
.get-btn:active {
  background: #e5e9f2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transform: scale(0.97);
}
.get-btn:focus {
  box-shadow: 0 0 0 2px #b3d7ff;
}
.gemini-header {
  display: flex;
  align-items: center;
  gap: 12px;
 

}
.gemini-title-block {
  flex: 1 1 auto;
}

/* Gemini Modal Styles */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-window {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 24px 20px 20px;
  min-width: 280px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}
.hidden {
  display: none !important;
}

/* Big preview image */
.gemini-hero {
  margin-bottom: 10px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
}

.gemini-hero-image {
  width: 100%;
  display: block;
  border-radius: 18px;
}

/* Details area (toggled) */
.gemini-details {
  margin-top: 10px;
}

.app-section {
  margin-top: 16px;
}

.app-section h2 {
  margin: 0 0 6px;
  font-size: 14px;
}

.app-section p {
  margin: 0 0 6px;
  line-height: 1.4;
}

.app-section ul {
  margin: 0 0 6px 16px;
  padding: 0;
  line-height: 1.4;
}


/* Clickable Skills row in the Notes overlay */
#notesApp .notes-skills-row {
  position: absolute;
  top: 24%;  /* adjust to line up with your notewall.png */
  left: -11%;
  right: -12%;
  padding: 12px 16px;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  z-index: 2;
  color: #333;
}
  #notesApp .notes-experience-row {
    position: absolute;
    top: 31%;
    left: -11%;
    right: -12%;
    padding: 12px 16px;
    background: transparent;
    cursor: pointer;
    border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
    color: #333;
}

/* White background for the Skills page */
#skillsScreen .skills-blank {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 1;
}
.skills-screen {
  position: absolute;
  top: 120px;          /* start just under the Notes header in notewall.png */
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  padding: 24px;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 3;          /* above notewall.png */
}


#skillsScreen .skills-content {
  position: absolute;
  top: 60px;
  left: 20px;
  right: 20px;
  z-index: 3;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05);
}



.skills-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #111;
}
.skills-header {
  position: absolute;
  top: 60px;
  left: 25px;
  z-index: 9999;
  margin-left: 10%;
}

.skills-back-btn {
  width: 30%;      /* change based on your image width */
  height: auto;
  cursor: pointer;
  object-fit: contain;
  margin-left: -17%;
}

.skills-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #333;
}

.skills-list li {
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 16px;

}
.skills-overlay {
  position: absolute;
  left: -19%;
  right: -19%;
  top: -5%;              /* starts just under the Skills row */
  bottom: 0;
  
  background: transparent; /* keeps the notewall visible */
  z-index: 3;              /* above everything in Notes */
  overflow-y: auto;
}


/* ---------------- MOBILE VIEW (real phone) ---------------- */
@media (max-width: 600px) {
  /* don’t center a fake device, just fill screen */
  body {
    background: #ffffff;
    display: block;
  }

  /* let the container fill the viewport */
  .phone {
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  /* hide the device frame image */
  .phone-img {
    display: none;
  }

  /* use the iOS wallpaper as the real background */
  .screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background: url("assets/wallpaper.webp") center/cover no-repeat;
  }
    .files-image {
      content: url("assets/fileph.jpg"); /* Replace files1.png with fileph.jpg */
      position: fixed;
      top: 13px;;
      left: -1px;
      width: 101vw;
      height: 102vh;
      }
     .accs-icon {
        position: absolute;
        top: 29%;
        left: 89%;
        width: 11%;
        cursor: pointer;
        opacity: 0.9;
        border-radius: 50%;
        z-index: 100;
    }
    .resume-icon {
        position: absolute;
        top: 24%;
        left: -1%;
        width: 36%;
        height: auto;
    }
    .device {
  position: relative;
  width: 360px;       /* adjust based on emptyscreen resolution */
  margin: 0 auto;
}

.device-frame {
  width: 100%;
  display: block;
}

/* MOBILE APP STORE – FULL WHITE SCREEN */
.appstore {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;         /* full white bg */
  overflow-y: auto;
  padding-top: 60px;         /* keeps home button visible */
  z-index: 5;
}

/* hide desktop phone-frame image on mobile */
.appstore-image {
  display: none;
}

/* white background underneath everything */
.bw-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}


.app-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.app-icon {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  object-fit: cover;
}

.app-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.app-sub {
  margin: 0;
  font-size: 12px;
  opacity: 0.6;
}
.accss-icon {
  position: absolute;
  top: 60%;      
  left: 85%;   
  width: 16%;  
  cursor: pointer;
  opacity: 0.9;   
  border-radius: 50%;
}
.gemini-modal-window {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  margin-left: -4%; /* move right */
  margin-right: -12%; /* move left */
  width: 95%;      /* full width */

}
/* ------------------------------
   MOBILE PHONE VIEW (real phone)
   ------------------------------ */
@media (max-width: 600px) {

  /* Hide phone frame on real mobile */
  .phone-img {
    display: none !important;
  }

  /* Use full screen on mobile */
  .screen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100vh !important;
    
  }

  /* NOTES APP */
  #notesApp {
    background: white !important;
    height: 100%;
  }

  /* Show ONLY notewall.png */
  #notesApp .notes-bg,
  #notesApp .files-image {
    display: none !important;
  }

  #notesApp .notes-wall {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: 0;
    left: 0;
    z-index: 1;
  }

  /* Skills row stays under the hero */
  .notes-skills-row {
    margin-top: 20px;
    z-index: 2;
    position: relative;
  }
  .notes-experience-row {
    margin-top: 20px;
    z-index: 2;
    position: relative;
  }

  /* Home button handle */
  #notesApp .accs-icon {
    position: fixed;
    bottom: 20px;
    right: 32px !important;
    width: 50px;
    height: 50px;
    z-index: 999;
    left: 87%;;
  }
  #notesApp .notes-skills-row {
    position: absolute;
    top: 24%;
    left: -1%;
    right: -1%;
    padding: 12px 16px;
    background: transparent;
    cursor: pointer;
    border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
    color: #333;
}

#skillsScreen .skills-content {
    position: absolute;
    top: 60px;
    left: 13%;
    right: 13%;
    z-index: 3;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05);
}
.skills-back-btn {
  width: 30%;      /* change based on your image width */
  height: auto;
  cursor: pointer;
  object-fit: contain;
  margin-left: 1%;
}

  #notesApp .notes-experience-row {
    position: absolute;
    top: 31%;
    left: 0%;
    right: 0%;
    padding: 12px 16px;
    background: transparent;
    cursor: pointer;
    border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
    color: #333;
}
}
.experience-overlay {
  position: absolute;
  left: -19%;
  right: -19%;
  top: -5%;
  bottom: 0;
  background: transparent;   /* keep notewall look; the content itself will be white */
  z-index: 3;                /* ⬅ put it ABOVE notes-wall */
  overflow: hidden;
}


.experience-header {
  position: absolute;
  top: 60px;
  left: 15px;
  z-index: 9999;
}

.experience-back-btn {
  width: 30%;
  height: auto;
  cursor: pointer;
  object-fit: contain;
  margin-left: 34%;
}


.experience-content {
  position: absolute;
  top: 60px;        
  left: 12%;        
  right: 14%;

  background: #ffffff;
  border-radius: 18px;

  padding: 16px 18px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  color: #000000;

  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;


}

.experience-content::-webkit-scrollbar {
  display: none;
}




.experience-content::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}


/* Make fonts bigger and clean like iOS Notes */
.experience-title {
  font-size: 32px;         /* big title */
  font-weight: 700;
  margin-bottom: 18px;
  color: #111;
}

/* Job role (bold) */
.exp-role {
  font-size: 18px;         /* bigger */
  font-weight: 700;
  color: #111;
}

/* Company name */
.exp-company {
  font-size: 14px;         /* slightly bigger */
  color: #777;
  margin-bottom: 6px;
}

/* Bullet list text */
.exp-text li {
  font-size: 16px;         /* bigger bullets */
  line-height: 1.55;
  margin-bottom: 8px;
  color: #000;
}

/* Logos */
.exp-logo {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* Whole card padding */
.exp-card {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.calendar-overlay {
  position: absolute;
  top: -1%;
  left: -1%;
  width: 94%;
  height: 100%;
  padding: 20px;
  background: rgba(255, 255, 255); 
  overflow-y: auto;
  border-radius: 16px;
  z-index: 1;


}
.calendar-accs-btn {
  position: absolute;
  bottom: 22%;   /* moves it upward inside the white card */
  right: 0%;    /* moves it from right */
  width: 12%;
  height: 50%;
  object-fit: contain;
  cursor: pointer;
  z-index: 3;
}

}