#main-container.view-visible {
  display: flex !important;
  gap: 14px;
  align-items: stretch;
}

.board-container {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(180deg, #1f262c, #181f24);
  border: var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

#myBoard {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 4px solid #303a43;
  border-radius: 4px;
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: contain;
}

#myBoard .board-b72b1,
#myBoard .square-55d63 {
  touch-action: none;
  -ms-touch-action: none;
}

#myBoard .square-55d63.last-move-from {
  box-shadow: inset 0 0 0 4px rgba(255, 196, 0, 0.55);
}

#myBoard .square-55d63.last-move-to {
  box-shadow: inset 0 0 0 4px rgba(255, 119, 0, 0.7);
}

.sidebar {
  width: min(360px, 100%);
  flex: 0 0 min(360px, 100%);
  background: linear-gradient(180deg, #1f262c, #181f24);
  border: var(--border);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.theme-control label {
  font-size: 0.85rem;
  color: var(--muted);
}

#board-theme-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #3b4650;
  background: #29313a;
  color: var(--text);
}

.timer-box {
  width: 100%;
  border-radius: 8px;
  background: var(--bg-3);
  border: var(--border);
  font-weight: 700;
  text-align: center;
  padding: 8px;
  margin-bottom: 8px;
}

.active-timer {
  border-color: #4ca177;
  color: #95e0ba;
}

#status {
  font-weight: 600;
  margin-top: 8px;
  color: #dbe8f2;
  text-align: center;
}

.game-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.round-btn {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.chat-header {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.88rem;
}

.chat-history {
  background: #13181d;
  border: var(--border);
  border-radius: 8px;
  padding: 8px;
  min-height: 145px;
  max-height: 145px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.msg-bubble {
  max-width: 85%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.9rem;
  word-break: break-word;
}

.msg-me {
  align-self: flex-end;
  background: #2b915f;
}

.msg-remote {
  align-self: flex-start;
  background: #2d3740;
}

.history-box {
  background: #20272d;
  border: var(--border);
  border-radius: 8px;
  padding: 8px;
}

.history-box summary {
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}

#history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.move-pill {
  background: #2a333b;
  border: 1px solid #3d4a56;
  border-radius: 5px;
  font-size: 0.8rem;
  padding: 2px 6px;
}

body.board-theme-wood #myBoard .white-1e1d7 {
  background: #e8d6b6 !important;
}

body.board-theme-wood #myBoard .black-3c85d {
  background: #b48962 !important;
}

body.board-theme-modern #myBoard .white-1e1d7 {
  background: #f1f3f5 !important;
}

body.board-theme-modern #myBoard .black-3c85d {
  background: #2f3f54 !important;
}

body.board-theme-green #myBoard .white-1e1d7 {
  background: #f2f7eb !important;
}

body.board-theme-green #myBoard .black-3c85d {
  background: #6c8d58 !important;
}

body.board-theme-bw #myBoard .white-1e1d7 {
  background: #ffffff !important;
}

body.board-theme-bw #myBoard .black-3c85d {
  background: #111111 !important;
}


@media (max-width: 1100px) {
  .board-container,
  .sidebar {
    width: 100%;
    flex: 1 1 auto;
  }

  .chat-history {
    min-height: 120px;
    max-height: 120px;
  }
}