.browser-session {
  display: grid;
  gap: clamp(7px, 1.2vh, 11px);
  min-width: 0;
  padding: clamp(10px, 1.6vh, 15px);
  border: 1px solid #415c43;
  border-radius: 12px;
  background: #0d1712b8;
}

.browser-session h3,
.browser-session p { margin: 0; }
.browser-session h3 { color: #f1f4eb; font-size: 1rem; line-height: 1.2; }
.browser-session-message { color: #b9c7b8; font-size: .86rem; line-height: 1.35; overflow-wrap: anywhere; }
.browser-session-message.error { color: #ffc2ad; }
.browser-session-form,
.browser-session-ready { display: grid; gap: 8px; min-width: 0; }
.browser-session-field { display: grid; gap: 4px; color: #d5ddcf; font-size: .8rem; font-weight: 650; }
.browser-session-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #506353;
  border-radius: 8px;
  background: #0a100d;
  color: #f1f4eb;
  font: inherit;
  font-size: .95rem;
}
.browser-session-field input:focus-visible { outline: 2px solid #a8d1ac; outline-offset: 2px; }
.browser-session-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.browser-session-buttons .button { min-height: 42px; }
.browser-session-buttons #browser-session-join { min-width: 132px; }
.browser-session-name { color: #a8d1ac; font-size: .82rem; }
.browser-session-install { color: #a8b1bd; font-size: .76rem; line-height: 1.3; }
#browser-session-install { justify-self: start; min-height: 36px; }
.browser-session button:disabled { cursor: progress; opacity: .65; }

@media (max-height: 620px) {
  .browser-session { padding: 8px 10px; gap: 6px; }
  .browser-session-field { gap: 3px; }
  .browser-session-field input { min-height: 38px; }
  .browser-session-install { display: none; }
}

@media (max-height: 440px) {
  .browser-session h3 { display: none; }
  .browser-session-message { font-size: .78rem; }
  .browser-session-buttons .button { min-height: 36px; }
}