/* ---------------------------------------------------------------------------
 * Text Options toolbar — shared styling
 * ---------------------------------------------------------------------------
 * Loaded once globally from templates/base.html. Consumers render the toolbar
 * through the templates/_partials/text_options_toolbar.html macro. The "cm-"
 * prefix is the stable, locked namespace for this widget — it does not imply
 * "client meeting"; treat it as the shared Text Options class root.
 * Variables fall back to a defensible default when the toolbar is mounted
 * outside a panel that defines --cm-panel-border.
 * ------------------------------------------------------------------------- */

.cm-text-options {
  --to-border: var(--cm-panel-border, color-mix(in srgb, var(--bs-border-color, #ced4da) 86%, transparent));
  --cm-to-gap: 0.32rem;
  --cm-to-radius: 0.5rem;
  --cm-to-accent: var(--bs-primary, #d71920);
  --cm-to-polish: #14b87a;
  --cm-to-create: #7c4dff;
  align-items: center;
  background: color-mix(in srgb, var(--bs-body-bg, #fff) 88%, var(--to-border) 12%);
  border: 1px solid var(--to-border);
  border-radius: 999px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--to-border) 60%, transparent) inset;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--cm-to-gap);
  padding: 0.22rem 0.32rem;
}

.cm-text-options-group {
  align-items: center;
  display: inline-flex;
  gap: 0.18rem;
}

.cm-text-options-group + .cm-text-options-group {
  border-left: 1px solid color-mix(in srgb, var(--to-border) 75%, transparent);
  padding-left: var(--cm-to-gap);
}

.cm-text-options-size {
  border: 1px solid transparent;
  background: transparent;
  color: var(--bs-body-color, #212529);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 5.4rem;
  padding: 0.22rem 1.6rem 0.22rem 0.55rem;
  border-radius: 999px;
}

.cm-text-options-size:hover,
.cm-text-options-size:focus-visible {
  background: color-mix(in srgb, var(--cm-to-accent) 10%, var(--bs-body-bg, #fff));
  border-color: color-mix(in srgb, var(--cm-to-accent) 38%, var(--to-border));
}

.cm-text-option-btn {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--bs-body-color, #212529);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.32rem;
  height: 1.85rem;
  justify-content: center;
  line-height: 1;
  min-width: 1.85rem;
  padding: 0 0.5rem;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.cm-text-option-btn .bi {
  font-size: 0.95rem;
  line-height: 1;
}

.cm-text-options-group:not(.cm-text-options-group--ai) .cm-text-option-btn {
  padding: 0;
  width: 1.85rem;
}

.cm-text-option-btn:hover,
.cm-text-option-btn:focus-visible {
  background: color-mix(in srgb, var(--cm-to-accent) 14%, var(--bs-body-bg, #fff));
  border-color: color-mix(in srgb, var(--cm-to-accent) 38%, var(--to-border));
  color: color-mix(in srgb, var(--cm-to-accent) 75%, var(--bs-body-color, #212529));
}

.cm-text-option-btn.active {
  background: color-mix(in srgb, var(--cm-to-accent) 22%, var(--bs-body-bg, #fff));
  border-color: color-mix(in srgb, var(--cm-to-accent) 55%, var(--to-border));
  color: color-mix(in srgb, var(--cm-to-accent) 80%, var(--bs-body-color, #212529));
}

.cm-text-option-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.cm-text-option-btn--polish {
  background: color-mix(in srgb, var(--cm-to-polish) 14%, var(--bs-body-bg, #fff));
  border-color: color-mix(in srgb, var(--cm-to-polish) 36%, var(--to-border));
  color: color-mix(in srgb, var(--cm-to-polish) 60%, var(--bs-body-color, #212529));
}

.cm-text-option-btn--polish:hover,
.cm-text-option-btn--polish:focus-visible {
  background: color-mix(in srgb, var(--cm-to-polish) 22%, var(--bs-body-bg, #fff));
  border-color: color-mix(in srgb, var(--cm-to-polish) 55%, var(--to-border));
  color: color-mix(in srgb, var(--cm-to-polish) 80%, var(--bs-body-color, #212529));
}

.cm-text-option-btn--create {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cm-to-create) 18%, var(--bs-body-bg, #fff)),
    color-mix(in srgb, var(--cm-to-polish) 14%, var(--bs-body-bg, #fff)));
  border-color: color-mix(in srgb, var(--cm-to-create) 42%, var(--to-border));
  color: color-mix(in srgb, var(--cm-to-create) 70%, var(--bs-body-color, #212529));
}

.cm-text-option-btn--create:hover,
.cm-text-option-btn--create:focus-visible {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cm-to-create) 28%, var(--bs-body-bg, #fff)),
    color-mix(in srgb, var(--cm-to-polish) 22%, var(--bs-body-bg, #fff)));
  border-color: color-mix(in srgb, var(--cm-to-create) 60%, var(--to-border));
  color: color-mix(in srgb, var(--cm-to-create) 85%, var(--bs-body-color, #212529));
  transform: translateY(-1px);
}

.cm-text-option-btn.is-busy {
  pointer-events: none;
}

.cm-text-option-btn .cm-spinner {
  height: 0.85rem;
  width: 0.85rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: cm-spin 0.7s linear infinite;
}

@keyframes cm-spin {
  to { transform: rotate(360deg); }
}