.marker-tool-control {
  position: relative;
  display: grid;
  place-items: center;
}

.marker-tool-menu {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 320px;
  height: min(480px, calc(100vh - 16px));
  max-height: calc(100vh - 16px);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 11px;
}

.marker-category-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 7px;
  border-bottom: 1px solid var(--chrome-line-soft);
  background: rgba(255, 255, 255, 0.018);
}

.marker-category-strip[hidden] {
  display: none;
}

.marker-category-button,
.marker-item,
.marker-menu-tab {
  border: 0;
  color: var(--chrome-text-muted);
  background: transparent;
  cursor: var(--zana-pointer-cursor);
}

.marker-category-button {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-family: "Segoe UI Symbol", sans-serif;
  font-size: 18px;
}

.marker-category-button:hover,
.marker-category-button:focus-visible,
.marker-category-button[aria-pressed="true"] {
  color: #f4f7fb;
  border-color: var(--chrome-line-strong);
  background: var(--chrome-wash-active);
  outline: none;
}

.marker-grid {
  align-content: start;
  min-height: 0;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(220, 226, 235, 0.32) transparent;
  scrollbar-width: thin;
}

.marker-grid-emoji,
.marker-grid-icon {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
}

.marker-grid-sticker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.marker-item {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
}

.marker-item:hover,
.marker-item:focus-visible,
.marker-item[aria-pressed="true"] {
  border-color: var(--chrome-line-strong);
  background: rgba(232, 237, 245, 0.08);
  outline: none;
}

.marker-item-emoji {
  height: 34px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 24px;
  line-height: 1;
}

.marker-item-icon {
  height: 34px;
  color: #edf1f6;
  font-family: Sora, "Segoe UI Symbol", sans-serif;
  font-size: 22px;
  font-weight: 800;
}

.marker-item-sticker {
  min-height: 34px;
  padding: 5px 7px;
  border-color: rgba(220, 226, 235, 0.10);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.marker-item-sticker[data-tone="positive"] {
  color: #9cecc5;
  background: rgba(24, 104, 75, 0.30);
}

.marker-item-sticker[data-tone="negative"] {
  color: #ffb5c0;
  background: rgba(112, 34, 47, 0.32);
}

.marker-item-sticker[data-tone="gold"] {
  color: #f2cd7c;
  background: rgba(122, 82, 24, 0.32);
}

.marker-item-sticker[data-tone="silver"] {
  color: #e7ebf1;
  background: rgba(109, 118, 132, 0.18);
}

.marker-menu-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 42px;
  border-top: 1px solid var(--chrome-line);
  background: rgba(4, 5, 7, 0.96);
}

.marker-menu-tab {
  position: relative;
  min-width: 0;
  padding: 8px 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 650;
}

.marker-menu-tab::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.marker-menu-tab:hover,
.marker-menu-tab:focus-visible,
.marker-menu-tab[aria-selected="true"] {
  color: #f4f7fb;
  outline: none;
}

.marker-menu-tab[aria-selected="true"]::after {
  background: var(--gold);
}

html[data-chart-tool="marker"] .chart-canvas,
html[data-chart-tool="marker"] .chart-workspace {
  cursor: crosshair !important;
}

@media (max-width: 480px) {
  .marker-tool-menu {
    width: min(304px, calc(100vw - 16px));
    height: min(430px, calc(100vh - 16px));
  }

  .marker-grid-emoji,
  .marker-grid-icon {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}