/* Global "Matrix" styling */
body {
  margin: 0;
  background: black;
  font-family: monospace;
  overflow: hidden;
  color: #0f0;
  font-size: clamp(14px, 1.6vw, 16px);
}

canvas#matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* background */
}

/* Foreground container layered above canvas */
.container {
  position: relative;
  z-index: 2;
  text-align: center;
  top: 8%;
}

.logo-img { 
    width: 250px; 
    margin-bottom: 2em;
}

.headline { margin: 10px 0 20px 0; }

/* Panels — fluid width so they fill nicely on mobile */
.box, .terminal {
  background: black;
  border: 1px solid #0f0;
  box-shadow: 0 0 12px #0f0;
  padding: 20px;
  margin: 0 auto;
  width: min(680px, 94vw);
}

/* Inputs and buttons */
input, button {
  width: 100%;
  background: black;
  color: #0f0;
  border: 1px solid #0f0;
  padding: 8px;
  font-family: monospace;
  margin-top: 10px;
  min-height: 44px; /* finger-friendly on mobile */
}

/* Chat log — larger on phones, capped on desktop */
#chatlog {
  height: 50vh;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid #0f0;
  padding: 10px;
  background: black;
  margin-bottom: 10px;
  text-align: left;
  white-space: pre-wrap;
}

.session-link { font-size: 12px; margin-top: 8px; text-align: left; }
.timestamp { opacity: 0.7; }

/* Session URL row: grid so URL + Copy button align neatly */
.session-link-row {
  display: grid;
  grid-template-columns: 1fr auto; /* URL grows, button fits */
  gap: 8px;
  align-items: center;
  margin-top: 6px;

  /* ensure the grid itself never exceeds the panel */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* KEY: allow the URL cell to shrink inside the grid */
.session-link-row > #session-url {
  min-width: 0;                 /* prevents overflow in CSS Grid */
}

/* The visible URL bubble (scroll horizontally if too long) */
#session-url {
  display: block;
  max-width: 100%;
  overflow-x: auto;             /* swipe/scroll to reveal full link */
  white-space: nowrap;          /* keep on one line */
  background: black;
  color: #0f0;
  border: 1px solid #0f0;
  padding: 6px;
  font-family: monospace;
  box-sizing: border-box;
  scrollbar-width: thin;        /* Firefox */
  -webkit-overflow-scrolling: touch; /* smoother on iOS */
}

/* Copy button beside the URL */
.session-link-row button {
  width: auto;
  margin-top: 0;
  padding: 8px 12px;
}

/* Input + Send side-by-side, stacks on small screens automatically */
.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .container { top: 4%; }
  .logo-img { width: 84px; }
  .headline { margin: 8px 0 16px; font-size: 1.06rem; }
  #chatlog { height: 25vh; } /* make chatbox bigger on phones */
  .input-row { grid-template-columns: 1fr; } /* stack input + button */
}

/* Large screens */
@media (min-width: 1024px) {
  #chatlog { height: 360px; }
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce) {
  canvas#matrix { display: none; }
}

/* Optional: keyboard focus ring */
#session-url:focus, button:focus, input:focus {
  outline: 1px dashed #0f0;
  outline-offset: 2px;
}