html, body, #terminal-frame {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* default: desktop / tablets */
:root{
  --frame-thickness: clamp(0px, 4vw, 400px);
}

/* phones ≤ 600 px portrait */
@media (max-width: 1000px){
  /* use the *smaller* of 4 vmin and 16 px on tiny screens */
  --frame-thickness: clamp(0px, 4vmin, 4px);
}

/* really tiny devices (old phones / split-screen) */
@media (max-width: 360px){
  --frame-thickness: 8px;        /* fixed, minimal but still visible   */
}

#terminal-frame {
    min-height: 300px;        /* whatever “too small” is for you */
    background: #2e2e2e;
    border: solid var(--frame-thickness) #4a4a4a;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* ensure full-page iframe */
#terminal-frame iframe {
  width: 100%;
  height: 100vh;
  border: none;
}
    /* pin the button top-left */
#mode-toggle {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}