style.css

/* As deviation from the mint theme: we want to remove the rounded corners */
* {
  border-radius: 0 !important;
}

.tilebox-landing-hero {
  min-height: 740px;
}

.tilebox-mode-card-preview {
  min-height: 160px;
  background-image: radial-gradient(circle, rgba(120, 120, 120, 0.18) 1px, transparent 1px);
  background-size: 16px 16px;
}

.tilebox-mode-card-image {
  height: auto;
  max-height: 160px;
  max-width: 92%;
  object-fit: contain;
  width: 100%;
}

.tilebox-agent-chat {
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding-left: 0.25rem;
  padding-top: 0.25rem;
}

.tilebox-agent-chat-message {
  align-items: flex-start;
  display: flex;
  gap: 0.875rem;
}

.tilebox-agent-chat-avatar {
  align-items: center;
  background: rgb(244 63 94);
  border-radius: 999px !important;
  box-shadow: 10px 12px 18px rgb(244 63 94 / 0.18);
  color: rgb(255 255 255);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.dark .tilebox-agent-chat-avatar {
  background: rgb(244 63 94);
  box-shadow: 10px 12px 18px rgb(244 63 94 / 0.20);
  color: rgb(255 255 255);
}

.tilebox-agent-chat-avatar svg {
  background-color: rgb(255 255 255);
  height: 0.9rem;
  fill: currentColor;
  width: 0.9rem;
}

.tilebox-agent-chat-content {
  flex: 1 1 auto;
  min-width: 0;
}

.tilebox-agent-chat-meta {
  color: rgb(75 85 99);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.dark .tilebox-agent-chat-meta {
  color: rgb(161 161 170);
}

.tilebox-agent-chat-bubble {
  background: rgb(255 255 255);
  border: 1px solid rgb(229 231 235);
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.07);
  color: rgb(63 63 70);
  display: block !important;
  font-family: "Geist", var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.62;
  margin: 0;
  max-height: 440px;
  overflow: auto;
  overflow-wrap: normal;
  padding: 1rem;
  text-align: left !important;
  word-break: normal;
}

.tilebox-agent-chat-bubble p,
.tilebox-agent-chat-bubble ul,
.tilebox-agent-chat-bubble li {
  margin: 0;
  padding: 0;
}

.tilebox-agent-chat-bubble ul {
  list-style-position: outside;
  padding-left: 1.05em;
}

.tilebox-agent-chat-bubble li {
  display: list-item;
  padding-left: 0.3em !important;
}

.tilebox-agent-chat-bubble li::marker {
  color: rgb(63 63 70);
  content: "-";
  font-size: 1.2em;
}

.tilebox-agent-chat-bubble li::before {
  content: none !important;
  display: none !important;
}

.dark .tilebox-agent-chat-bubble {
  background: rgb(24 24 27);
  border-color: rgb(63 63 70);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.30);
  color: rgb(212 212 216);
}

.dark .tilebox-agent-chat-bubble li::marker {
  color: rgb(212 212 216);
}

.tilebox-agent-chat-composer {
  align-items: center;
  background: rgb(255 255 255);
  border: 1px solid rgb(229 231 235);
  color: rgb(107 114 128);
  display: flex;
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88rem;
  justify-content: space-between;
  margin-left: 2.875rem;
  margin-top: 1rem;
  padding: 0.85rem 0.95rem;
  text-decoration: none;
}

.tilebox-agent-chat-composer:hover {
  border-color: rgb(209 213 219);
  color: rgb(31 41 55);
}

.dark .tilebox-agent-chat-composer {
  background: rgb(24 24 27);
  border-color: rgb(63 63 70);
  color: rgb(161 161 170);
}

.dark .tilebox-agent-chat-composer:hover {
  border-color: rgb(82 82 91);
  color: rgb(228 228 231);
}

.tilebox-agent-chat-send {
  align-items: center;
  background: rgb(243 244 246);
  border: 1px solid rgb(229 231 235);
  color: rgb(75 85 99);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.dark .tilebox-agent-chat-send {
  background: rgb(39 39 42);
  border-color: rgb(63 63 70);
  color: rgb(212 212 216);
}

.tilebox-cli-window {
  background: rgb(244 244 245);
  border: 1px solid rgb(187 187 187 / 0.5);
  box-shadow: 0 24px 36px rgb(0 0 0 / 0.18);
  overflow: hidden;
}

.dark .tilebox-cli-window {
  background: rgb(31 31 31);
}

.tilebox-cli-controls {
  background: rgb(244 244 245);
  display: flex;
  gap: 0.52rem;
  margin: 0;
  padding: 1rem 1.2rem 1rem;
}

.dark .tilebox-cli-controls {
  background: rgb(31 31 31);
}

.tilebox-cli-control {
  border-radius: 999px !important;
  display: block;
  height: 0.9rem;
  width: 0.9rem;
}

.tilebox-cli-control-red {
  background: rgb(255 91 87);
}

.tilebox-cli-control-yellow {
  background: rgb(255 189 46);
}

.tilebox-cli-control-green {
  background: rgb(40 201 64);
}

.tilebox-cli-code {
  color: rgb(229 229 184);
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  overflow: visible;
  tab-size: 2;
  white-space: pre;
}

.tilebox-cli-code .code-block {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tilebox-cli-code [data-component-part="code-block-header"] {
  display: none !important;
}

.tilebox-cli-code .code-block-background {
  margin: 0 !important;
  padding: 1.35rem 1.55rem 1.65rem !important;
}

.tilebox-cli-code pre,
.tilebox-cli-code code {
  margin: 0 !important;
}

.tilebox-cli-code code {
  font: inherit;
}

@media (max-width: 1023px) {
  .tilebox-landing-hero {
    min-height: auto;
  }
}


/* Manually override the Documentation tab being highlighted on the landing/index page */
html:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"] {
  color: rgb(75 85 99) !important;
  text-shadow: none !important;
}

html.dark:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"] {
  color: rgb(161 161 170) !important;
}

html:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"] > div {
  background: transparent !important;
}

html:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"]:hover {
  color: rgb(31 41 55) !important;
}

html.dark:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"]:hover {
  color: rgb(212 212 216) !important;
}

html:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"]:hover > div {
  background: rgb(229 231 235) !important;
}

html.dark:has(.tilebox-home-marker) .nav-tabs .nav-tabs-item[data-active="true"]:hover > div {
  background: rgb(63 63 70) !important;
}