* {
  box-sizing: border-box;
}

body {
  background-color: #1a1c23;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: monospace;
  overflow: hidden;
}

/* Overall Layout Frame - Desktop Default */
#tui-wrapper {
  display: grid;
  grid-template-columns: 1fr 140px; /* Main chat | 140px sidebar */
  grid-template-rows: 1fr 60px;     /* Top panes | 60px input box */
  grid-template-areas: 
    "chat sidebar"
    "input input";
  width: 95vw;
  max-width: 900px;
  height: 85vh;
  max-height: 650px;
  gap: 4px;
  padding: 8px;
  background-color: #282a36;
  border: 1px solid #44475a;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pane {
  background-color: #1e1f29;
  border: 1px solid #6272a4;
  padding: 4px;
  position: relative;
  contain: content;
  overflow: hidden;
}

#chat-container { 
  grid-area: chat; 
}

#sidebar-container { 
  grid-area: sidebar; 
}

#input-container { 
  grid-area: input; 
}

/* Hide cursor element in chat & sidebar panes */
#chat-container .xterm-cursor-layer,
#sidebar-container .xterm-cursor-layer {
  display: none !important;
}

/* Make xterm canvases fit seamlessly inside panes */
.terminal {
  width: 100%;
}

.xterm-viewport {
  overflow-y: auto !important;
}

/* -------------------------------------------------- */
/* Mobile & Small Screen Optimizations (< 650px)      */
/* -------------------------------------------------- */
@media (max-width: 650px) {
  #tui-wrapper {
    width: 100vw;
    max-width: 100%;
    border-radius: 0;
    border: none;
    padding: 4px;
    gap: 4px;

    /* Stack layout: Chat (large) -> Online Users (small) -> Input */
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto auto;
    grid-template-areas: 
      "sidebar"
      "chat"
      "input";
  }

  .pane {
    padding: 2px;
  }
}