:root {
  --nn-primary: #6c63ff;
  --nn-primary-rgb: 108, 99, 255;
  --nn-accent: #28d7a1;
  --nn-bg: #0e1016;
  --nn-surface: #171a23;
  --nn-surface-2: #202432;
  --nn-text: #f5f7ff;
  --nn-muted: #99a0b3;
  --nn-border: rgba(255,255,255,.09);
  --bs-primary: var(--nn-primary);
  --bs-primary-rgb: var(--nn-primary-rgb);
  --bs-body-bg: var(--nn-bg);
  --bs-body-color: var(--nn-text);
  --bs-secondary-color: var(--nn-muted);
  --bs-border-color: var(--nn-border);
}
:root {
  --nn-flash: #f6c344;
  --nn-flash-text: #16130b;
  --nn-flash-upcoming: #69b8ff;
  --nn-flash-upcoming-text: #091a2b;
  --nn-marker-border: rgba(255,255,255,.9);
  --nn-marker-shadow: rgba(0,0,0,.35);
}

/* Chat mobile viewport / virtual keyboard */
.chat-card {
  display: flex;
  flex-direction: column;
  height: min(68vh, var(--nn-chat-available-height, 68vh));
  max-height: var(--nn-chat-available-height, 68vh);
  min-height: 0;
  overflow: hidden;
}

.chat-card .chat-box {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.chat-composer {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: var(--nn-surface);
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}

.chat-composer .form-control {
  scroll-margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .chat-card {
    /* Fill 100% of the currently visible viewport below the chat header. */
    height: var(--nn-chat-available-height, 70dvh);
    max-height: none;
  }

  .chat-send-button {
    display: none;
  }

  .chat-composer form {
    gap: 0 !important;
  }
}