/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* ===================================================================
   CHAT TOKENS — inline badges for <start_of_turn>, roles, tools…
   Owns: the .token-* badge styling used in prompt-format docs.
   Colours come from gemma.css (--gemma-cat-*).
   =================================================================== */

/* ==========================================================================
   High Specificity Badge Styles (Overrides default .md-typeset code)
   ========================================================================== */

.md-typeset .token-turn,
.md-typeset .token-role,
.md-typeset .token-multi,
.md-typeset .token-tool,
.md-typeset .token-think,
.md-typeset code.token-turn,
.md-typeset code.token-role,
.md-typeset code.token-multi,
.md-typeset code.token-tool,
.md-typeset code.token-think,
.token-turn,
.token-role,
.token-multi,
.token-tool,
.token-think {
  display: inline-block !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-family: var(--md-code-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace) !important;
  font-size: 0.875em !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  vertical-align: baseline;
  white-space: nowrap;
}

/* Category Specific Color Rules */
.md-typeset .token-turn,
.md-typeset code.token-turn,
.token-turn {
  background-color: var(--gemma-cat-turn-bg) !important;
  color: var(--gemma-cat-turn-fg) !important;
  border: 1px solid var(--gemma-cat-turn-border) !important;
}

.md-typeset .token-role,
.md-typeset code.token-role,
.token-role {
  background-color: var(--gemma-cat-role-bg) !important;
  color: var(--gemma-cat-role-fg) !important;
  border: 1px solid var(--gemma-cat-role-border) !important;
}

.md-typeset .token-multi,
.md-typeset code.token-multi,
.token-multi {
  background-color: var(--gemma-cat-multi-bg) !important;
  color: var(--gemma-cat-multi-fg) !important;
  border: 1px solid var(--gemma-cat-multi-border);
}

.md-typeset .token-tool,
.md-typeset code.token-tool,
.token-tool {
  background-color: var(--gemma-cat-tool-bg) !important;
  color: var(--gemma-cat-tool-fg) !important;
  border: 1px solid var(--gemma-cat-tool-border) !important;
}

.md-typeset .token-think,
.md-typeset code.token-think,
.token-think {
  background-color: var(--gemma-cat-think-bg) !important;
  color: var(--gemma-cat-think-fg) !important;
  border: 1px solid var(--gemma-cat-think-border) !important;
}