.function-palette-wrap {
  flex: none;
  border-top: 1px solid var(--line);
  background: #181c2c;
}

.function-palette-label {
  display: block;
  padding: 6px 10px 3px;
  color: #6f7795;
  font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.function-palette {
  display: flex;
  gap: 6px;
  height: 43px;
  padding: 3px 10px 7px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.function-chip {
  flex: none;
  min-width: max-content;
  padding: 6px 9px;
  border: 1px solid #3a4265;
  border-radius: 4px;
  background: #222740;
  color: var(--cyan);
  font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.function-chip:active,
.function-chip:focus {
  border-color: var(--cyan);
  background: #2a3150;
  outline: none;
}

.function-chip .params {
  color: #7f87a4;
  font-weight: 500;
}

.parameter-hint {
  position: absolute;
  z-index: 3;
  max-width: calc(100% - 60px);
  overflow: hidden;
  color: #77809d;
  background: #151827;
  font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 720px) {
  .code-panel { min-height: 340px; }
  .function-palette { height: 45px; }
  .function-chip { padding: 7px 10px; font-size: 12px; }
}