body {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  background: linear-gradient(130deg, #eaf3fc 0%, #eaf1f7 70%, #f8fbff 100%);
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
  color: #222;
}

header {
  background: #3570a3;
  color: #fff;
  padding: 1rem 0.5rem 0.6rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 3px 18px #23406012;
}

h1 {
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: .02em;
}

#coach-btn {
  background: #fff;
  color: #3570a3;
  border: none;
  font-size: 1.3rem;
  padding: 0.4em 0.7em;
  border-radius: 1.5em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px #23406022;
  transition: background 0.15s;
}
#coach-btn:active { background: #f0f5fb; }

#root {
  padding: 0.5rem 0.2rem 3rem 0.2rem;
  max-width: 900px;
  margin: 0 auto;
}

.periodic-table {
  display: grid;
  grid-template-columns: repeat(18, minmax(28px, 1fr));
  gap: 3px;
  background: #dde9f3;
  border-radius: 12px;
  padding: 8px 4px;
  margin: 0.7em 0;
  overflow-x: auto;
  /* New for mobile friendliness: wider on overflow, fits screen */
  width: 100%;
  box-sizing: border-box;
  /* Ensure grid not wider than screen */
  max-width: 100vw;
}

@media (max-width: 950px) {
  .periodic-table {
    grid-template-columns: repeat(18, minmax(19px, 1fr));
    font-size: 0.86em;
    padding: 5px 2px;
  }
}

@media (max-width: 850px) {
  .periodic-table {
    grid-template-columns: repeat(18, minmax(25px, 0.8fr));
    font-size: 0.78em;
    padding-left: 1px;
    padding-right: 1px;
  }
}

@media (max-width: 700px) {
  .periodic-table {
    grid-template-columns: repeat(18, minmax(19px, 5vw));
    font-size: 0.75em;
    gap: 2px;
    padding: 3px 0px;
  }
}

@media (max-width: 600px) {
  header {
    font-size: 0.92em;
    padding-left: 0.12em; padding-right: 0.12em;
  }
  #root {
    padding: 0.11rem 0.01rem 2.1rem 0.01rem;
  }
  .periodic-table {
    grid-template-columns: repeat(18, minmax(15px, 5vw));
    font-size: 0.66em;
    min-width: 320px;
    gap: 1.5px;
    padding: 2.5px 0px;
  }
}

.element-cell {
  cursor: pointer;
  min-width: 2.9vw;
  min-height: 41px;
  background: #f7fbfecc;
  border-radius: 0.6em;
  margin: 0.5px;
  text-align: center;
  will-change: transform, box-shadow;
  font-size: 1.08em;
  border: 2px solid transparent;
  touch-action: manipulation;
  box-shadow: 0 2px 8px #cddef755;
  outline: none;
  transition: min-width 0.12s, min-height 0.13s, font-size 0.14s;
  box-sizing: border-box;
  /* Responsive padding for mobile tightness */
  padding: 0.15em 0.03em 0.21em 0.03em;
}

.element-cell .symbol {
  font-size: 1.11em;
  font-weight: 800;
  text-shadow: 0 0 5px #cffcff19, 0 2px 7px #fff8db22;
  display: block;
}

.element-cell .atomic-number {
  filter: drop-shadow(0 0 1px #f9e19754);
  font-size: 0.85em;
}

.element-cell .name {
  color: #208383;
  font-size: 0.75em;
}

/* Smaller heights for very, very small screens */
@media (max-width: 460px) {
  .element-cell {
    min-width: 2vw;
    min-height: 28px;
    font-size: 0.95em;
    padding: 0.09em 0.01em 0.13em 0.01em;
  }
  .element-cell .name { font-size: 0.64em; }
  .element-cell .symbol { font-size: 1em; }
}

/* Ensure group/period labels fit on mobile; smaller font and adjust spacing  */
.group-label, .period-label {
  font-size: 0.82em;
  color: #3570a3;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1em;
  min-width: 1em;
  background: none;
  border: none;
  padding: 0;
}

@media (max-width: 600px) {
  .group-label, .period-label { font-size: 0.68em; }
}

@media (max-width: 460px) {
  .group-label, .period-label { font-size: 0.6em; }
}

/* --- Visual vibrancy for popups --- */
.popup {
  border: 2.7px solid #f7e66f37;
  background: linear-gradient(129deg,#fafcff 77%,#eaffff 100%);
}
.popup h2 .symbol {
  background: linear-gradient(90deg, #39db87 40%, #7accff 80%, #ffe39a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 450px) {
  .popup, .coach-popup .popup {
    min-width: 97vw;
    width: 97vw;
    border-radius: 0.8em;
    padding: 0.5em 0.1em;
  }
}

/* -- ANIMATION: open overlay faster on mobile -- */
@media (max-width:480px) {
  .popup-overlay {
    animation-duration: 0.10s !important;
  }
}

/* -- Make coach input more prominent -- */
.coach-input {
  background: #fcfefd;
  border: 1.7px solid #65bbff67;
  box-shadow: 0 1px 9px #bef7e455;
}
.coach-input:focus {
  border-color: #70bbff;
}
.send-btn {
  background: linear-gradient(90deg, #33d9c8 24%, #33a0d9 78%);
  color: #fff;
  transition: background 0.13s, box-shadow 0.13s;
  box-shadow: 0 1px 8px #33d9c833;
}
.send-btn:active {
  background: #86e7b7;
  color: #268cef;
}

::-webkit-scrollbar { width: 0.28em; border-radius: 12px;}
::-webkit-scrollbar-thumb { background:#b0e1ff55; border-radius:10px;}
::-webkit-scrollbar-track { background:#fff0;}

.popup-overlay {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(34, 44, 60, 0.38);
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  animation: fadein-overlay 0.18s;
  padding-top: 5vh !important;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-sizing: border-box;
  overflow-y: auto;
}

@media (max-width: 540px) {
  .popup-overlay {
    padding-top: 2.5vh !important;
    padding-bottom: 2.5vh !important;
  }
}

@keyframes fadein-overlay {
  from { background: rgba(34, 44, 60, 0.03);}
  to { background: rgba(34,44,60,0.38);}
}

.popup {
  background: #fafcff;
  border-radius: 1.6em;
  padding: 1.1em 1em 1em 1em;
  max-width: 95vw;
  width: 380px;
  box-shadow: 0 6px 60px #397bc855, 0 1px 6px #3570a340;
  z-index: 110;
  position: relative;
  animation: popup-bounce 0.27s cubic-bezier(.67,1.6,.3,0);
}
@keyframes popup-bounce {
  from { transform: translateY(60px) scale(0.8); opacity: 0;}
  to { transform: none; opacity: 1;}
}
.popup .close-btn {
  position: absolute; top: 0.2em; right: 0.6em;
  font-size: 1.6em; color: #3570a3;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.06em 0.18em;
  border-radius: 100px;
  transition: background 0.14s;
}
.popup .close-btn:active { background: #e0eefb; }

.popup h2 {
  margin-top: 0;
  margin-bottom: 0.55em;
  color: #2860a0;
  font-size: 1.21em;
}

.popup .subtitle {
  font-size: 1em;
  margin-bottom: 0.3em;
  color: #3570a3;
}

.popup .ai-activity, .popup .reference {
  background: #f1f4fc;
  border-radius: 1.1em;
  padding: 0.6em 0.8em;
  margin: 0.6em 0 0.5em 0;
  font-size: 0.97em;
  color: #3570a3;
}

.popup .section-label {
  font-weight: bold;
  color: #3570a3;
  margin-top: 1em;
  margin-bottom: 0.13em;
  font-size: 0.96em;
}

.popup .exp-btn {
  background: #3570a3;
  color: #fff;
  border: none;
  border-radius: 1em;
  padding: 0.44em 0.8em;
  font-size: 1em;
  cursor: pointer;
  margin-top: 0.3em;
  margin-bottom: 0.25em;
  font-weight: bold;
  transition: background 0.12s;
  box-shadow: 0 1px 6px #3570a329;
}
.popup .exp-btn:active {
  background: #264d71;
}

.popup .chat-section {
  margin-top: 0.65em;
  border-top: 1px solid #e5effa;
  padding-top: 0.7em;
  margin-bottom: -0.25em;
}

.coach-popup .popup {
  max-width: 98vw;
  width: 98vw;
  max-height: 98vh;
  padding: 0.7em 0;
  overflow: auto;
}

.coach-header {
  display: flex;
  align-items: center;
  gap: 0.79em;
  padding-left: 1.15em;
}
.coach-avatar {
  font-size: 2.1em;
  position: relative;
  display: inline-block;
}
.coach-avatar::after {
  content: "✨";
  position: absolute;
  right: -0.7em; top: -0.4em;
  font-size: 0.85em;
  animation: sparkle 1.2s infinite alternate ease-in-out;
  opacity: 0.65;
}
@keyframes sparkle {
  0% { transform: scale(0.6) rotate(-18deg);}
  84% { opacity: 0.55;}
  100% { opacity: 1; transform: scale(1) rotate(10deg);}
}

.coach-title {
  font-size: 1.13em;
  color: #2860a0;
  font-weight: bold;
}

.coach-chat-history {
  padding: 0.7em 1.4em 0 1.45em;
  max-height: 42vh;
  overflow-y: auto;
  font-size: 1.08em;
  margin-bottom: .15em;
}
.coach-msg {
  margin-bottom: 0.35em;
}
.coach-msg.user {
  align-self: flex-end;
  background: #e7f1fa;
  color: #2860a0;
  border-radius: 1.2em 1.2em 0.1em 1.2em;
  padding: 0.5em 0.9em;
  font-weight: normal;
  max-width: 80vw;
  display: inline-block;
}
.coach-msg.ai {
  align-self: flex-start;
  background: #f7faff;
  color: #2860a0;
  border-radius: 1.2em 1.2em 1.2em 0.15em;
  padding: 0.5em 0.9em;
  box-shadow: 0 1px 7px #3a678a22;
  max-width: 84vw;
  display: inline-block;
  font-weight: 500;
}
.coach-chat-box {
  display: flex; gap: 0.4em;
  padding: 0.5em 1.2em 1.2em 1.2em;
  align-items: flex-end;
}
.coach-input {
  flex: 1;
  border-radius: 1em;
  border: 1.3px solid #b9d1ee;
  padding: 0.7em 1em;
  font-size: 1.04em;
  outline: none;
  box-shadow: 0 0 4px #2340600b;
}
.send-btn {
  background: #3570a3;
  color: #fff;
  border: none;
  border-radius: 1em;
  font-size: 1.1em;
  padding: 0.5em 1.15em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 4px #3570a321;
}

::-webkit-input-placeholder { color:#b2c7dd;}
::-moz-placeholder { color:#b2c7dd;}
:-ms-input-placeholder { color:#b2c7dd;}
::placeholder { color:#b2c7dd;}

button, .exp-btn, .send-btn, #coach-btn {
  transition: background 0.12s, box-shadow 0.14s, transform 0.1s;
}
button:hover, .exp-btn:hover, .send-btn:hover, #coach-btn:hover {
  background: #dde9f3;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 2px 12px #8beaf95a;
}

/* Connected Sciences styles */
.connected-sciences {
  background: #eefdff;
  border-radius: 1.2em;
  padding: 0.67em 1.05em 0.7em 1.15em;
  margin: 0.5em 0 0.8em 0;
  box-shadow: 0 1px 8px #9ae2ce23;
}
.science-connection {
  margin-bottom: 0.37em;
  font-size: 1em;
}
.science-name {
  font-weight: 700;
  margin-right: 0.3em;
}
.science-descr {
  color: #237a8f;
}

/* Universal Science Coach Button (FAB style for mobile) */
.universal-science-coach-btn {
  position: fixed;
  bottom: 1.6em;
  right: 1.1em;
  z-index: 120;
  background: linear-gradient(90deg, #41e6b6 20%, #44a3e9 80%);
  color: #fff;
  border: none;
  outline: none;
  padding: 0.79em 1.2em;
  font-size: 1.14em;
  border-radius: 1.8em;
  font-weight: bold;
  box-shadow: 0 8px 36px #1590d044, 0 1.5px 7px #31f0e620;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.12s, transform 0.10s;
  opacity: 0.98;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.universal-science-coach-btn:active,
.universal-science-coach-btn:hover {
  background: linear-gradient(93deg, #7beee4 19%, #85a6ff 88%);
  box-shadow: 0 4px 10px #47abe722;
  transform: scale(0.98);
}

@media (max-width:700px) {
  .universal-science-coach-btn {
    font-size: 1em;
    padding: 0.65em 1.08em;
    bottom: 1em;
    right: 0.5em;
  }
}
@media (max-width:460px) {
  .universal-science-coach-btn {
    font-size: 0.96em;
    padding: 0.61em 0.82em;
    bottom: 0.6em;
    right: 0.4em;
    border-radius: 1.3em;
  }
}

/* =============== Responsive tweaks for overlap issues =============== */

/* Ensure the universal science coach button sits above popups etc */
.universal-science-coach-btn {
  z-index: 130 !important;
}

/* Move FAB up when popups are open (element popup, coach, or profile) */
body.popup-open .universal-science-coach-btn {
  /* On mobile: nudge up so it doesn't overlap with popup shadows */
  bottom: 5.8em !important;
  transition: bottom 0.18s cubic-bezier(.52,1.5,.3,1.0);
}

@media (max-width: 540px) {
  body.popup-open .universal-science-coach-btn {
    bottom: 8.5em !important;
    right: 0.3em !important;
    font-size: 0.93em;
  }
}

/* Popups should have higher z-index than other content but not block FAB */
.popup-overlay,
.coach-popup .popup,
.popup {
  z-index: 120 !important;
}

/* More robust spacing for popups on mobile to avoid FAB */
@media (max-width: 540px) {
  .popup, .coach-popup .popup {
    margin-bottom: 6.5em !important;
    /* padding-bottom: 1em !important; */
  }
}

/* On small screens, give coach/chat input box enough margin from bottom for FAB */
@media (max-width: 540px) {
  .coach-popup .popup form.coach-chat-box {
    margin-bottom: 2.8em;
  }
}

/* Don't overlap coach/chat input with the FAB */
@media (max-width: 460px) {
  .coach-popup .popup {
    margin-bottom: 9em !important;
  }
  .coach-popup .popup form.coach-chat-box {
    margin-bottom: 3.7em;
  }
}

/* Make sure popups are vertically scrollable on short screens, not cutoff by FAB */
@media (max-width: 540px) {
  .popup, .coach-popup .popup {
    max-height: 86vh !important;
    overflow-y: auto;
  }
}

/* Optional: Hide FAB while a popup is open to avoid any overlap */
body.popup-open .universal-science-coach-btn.hide-when-popup {
  display: none !important;
}

/* Visually hint user can close popups (edge-to-edge, safe area) */
.popup-overlay {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* --- Science Domains FAB and Popup --- */
.science-domains-fab {
  position: fixed;
  left: 1.1em;
  bottom: 1.6em;
  z-index: 132 !important;
  background: linear-gradient(74deg,#aee1e7 7%,#89e4c1 100%);
  color: #2860a0;
  border: none;
  outline:none;
  padding: 0.7em 1.2em;
  font-size: 1.08em;
  border-radius: 1.8em;
  font-weight: bold;
  box-shadow: 0 8px 36px #21b0d044, 0 1.5px 7px #90f0e620;
  cursor: pointer;
  opacity: 0.98;
  display: flex;
  align-items: center;
  gap: 0.6em;
  transition: background 0.15s, box-shadow 0.14s, transform 0.10s;
}
.science-domains-fab:active,
.science-domains-fab:hover {
  background: linear-gradient(93deg, #b5fffa 19%, #c2f0ce 88%);
  box-shadow: 0 4px 10px #99e2dd22;
  transform: scale(0.98);
}
@media (max-width:700px) {
  .science-domains-fab {
    font-size: 1em;
    padding: 0.57em 0.95em;
    bottom: 1em; left: 0.5em;
  }
}
@media (max-width:460px) {
  .science-domains-fab {
    font-size: 0.93em; padding: 0.41em 0.76em;
    bottom: 0.6em; left: 0.3em; border-radius: 1.3em;
  }
}
body.popup-open .science-domains-fab { bottom: 5.8em !important;}
@media (max-width: 540px) {
  body.popup-open .science-domains-fab {
    bottom: 8.5em !important; font-size: 0.91em;
  }
}
body.popup-open .science-domains-fab.hide-when-popup {
  display: none !important;
}
.science-domain-popup {
  width: 97vw !important; max-width: 425px !important;
}
.science-domain-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap: 0.83em 0.71em;
  margin-top: 1em;
}
@media(max-width:540px){.science-domain-grid{grid-template-columns:1fr;}}
.science-domain-card {
  background: #f3f9ff;
  border: 1.3px solid #bce5ff59;
  border-radius: 1.23em;
  box-shadow: 0 1px 7px #469cf92c;
  padding: 0.69em 1.15em 0.84em 0.72em;
  display: flex; flex-direction: column; align-items: flex-start;
  cursor: pointer;
  min-width:0;
  font-size:1em;
  margin-bottom:0;
  transition: background 0.14s, box-shadow 0.10s, transform 0.09s;
}
.science-domain-card:active, .science-domain-card:hover {
  background: #e9f4ff;
  box-shadow: 0 2px 10px #77c7e859;
  transform: scale(1.03) rotate(-2deg);
}
.science-domain-emoji {
  font-size: 1.32em; margin-bottom: 0.27em;
}
.science-domain-name {
  font-weight: 700; color:#2860a0; margin-bottom: 0.13em;
}
.science-domain-desc {
  color: #359877; font-size: 0.95em; margin-bottom: 0.07em;
}
.science-domain-head {
  display: flex; align-items: center; gap: 0.7em;
  margin-bottom: 0.11em;
}
.science-domain-emoji-head {
  font-size: 2.15em; margin-right: 0.09em;
}
.science-domain-title {
  font-size: 1.21em; color: #1b9aac; font-weight: bold;
}
.science-example-prompts {
  display: flex; flex-wrap: wrap; gap: 0.29em; margin-bottom: 0.6em;
}
.science-example-btn {
  background: #e1f1fa;
  border:none; border-radius:1.12em;
  color:#268c9e; font-weight:500;
  padding:0.33em 0.7em; font-size:0.96em;
  margin: 0.04em 0 0.04em 0;
  cursor:pointer;
  box-shadow:0 1px 6px #91e4f259;
  transition:background 0.12s;
}
.science-example-btn:active {
  background: #b3f0eb;
  color: #145273;
}

/* --- POPUP: Prevent Off-screen Cramping and Improve Layout on Mobile --- */
.popup,
.coach-popup .popup,
.science-domain-popup {
  /* Try to center & fit within viewport in all directions, even on small screens */
  box-sizing: border-box;
  max-height: 94vh !important; /* was 86 or 98. Expand just a touch but not over screen */
  /* mobile horizontal padding is key for no-overflow: */
  width: 94vw !important;
  max-width: 425px !important;
  min-width: 0 !important;
  /* pad inside, not blast edges */
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Ensure centered even in landscape/rotated */
  margin: auto;
}

@media (max-width: 540px) {
  .popup,
  .coach-popup .popup,
  .science-domain-popup {
    width: 98vw !important;
    max-width: 98vw !important;
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 0.8em;
    min-width: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 1vw;
    right: 1vw;
  }
}

/* Always scrollable if content is tall */
.popup,
.coach-popup .popup,
.science-domain-popup {
  overflow-y: auto;
  /* for extra safety! */
  max-height: calc(97vh - 18px);
}

@media (max-width: 360px) {
  .popup,
  .coach-popup .popup,
  .science-domain-popup {
    font-size: 0.94em;
  }
}

/* --- Coach/Chat Input: Tighter packed on small --- */
@media (max-width: 540px) {
  .coach-popup .popup form.coach-chat-box {
    margin-bottom: 2.8em;
    padding-bottom: 0 !important;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}

/* --- Reduce padding on example prompts mobile --- */
@media (max-width: 540px) {
  .science-example-btn {
    padding: 0.23em 0.49em;
    font-size: 0.93em;
  }
}

/* =============== CONSOLIDATED RESPONSIVE STYLING =============== */
/* This section centralizes responsive logic, including rules previously in JS */

/* For screens like tablets or large phones (<550px) */
@media (max-width: 549px) {
  .periodic-table {
    font-size: 0.7em; 
    min-width: 340px;
  }
  .element-cell {
    min-width: 4.7vw;
    min-height: 26px;
    font-size: 0.93em;
  }
}

/* For smaller phones (<400px) */
@media (max-width: 399px) {
  .periodic-table {
    font-size: 0.61em;
    min-width: 310px;
  }
  .element-cell {
    min-width: 7.2vw;
    min-height: 23px;
    font-size: 0.87em;
    padding: 0.06em 0.01em 0.11em 0.01em;
  }
}

/* For very narrow phones (<380px), hide element name for a better fit */
@media (max-width: 379px) {
  .element-cell .name {
    display: none;
  }

  .element-cell {
    min-height: 36px;
    padding-top: 0.4em;
    box-sizing: border-box;
    justify-content: center;
  }

  .popup, .coach-popup .popup, .science-domain-popup {
    font-size: 0.93em;
  }
}